<!DOCTYPE html>
<html lang="" xml:lang="">
<head>

  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>Chapter 7 The Full Monty | JavaScript for R</title>
  <meta name="description" content="Invite JavaScript into your Data Science workflow." />
  <meta name="generator" content="bookdown 0.21 and GitBook 2.6.7" />

  <meta property="og:title" content="Chapter 7 The Full Monty | JavaScript for R" />
  <meta property="og:type" content="book" />
  
  
  <meta property="og:description" content="Invite JavaScript into your Data Science workflow." />
  <meta name="github-repo" content="JohnCoene/javascript-for-r" />

  <meta name="twitter:card" content="summary" />
  <meta name="twitter:title" content="Chapter 7 The Full Monty | JavaScript for R" />
  
  <meta name="twitter:description" content="Invite JavaScript into your Data Science workflow." />
  

<meta name="author" content="John Coene" />


<meta name="date" content="2021-04-19" />

  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  
  
<link rel="prev" href="widgets-realistic.html"/>
<link rel="next" href="widgets-adv.html"/>
<script src="libs/jquery-3.5.1/jquery.min.js"></script>
<link href="libs/gitbook-2.6.7/css/style.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-table.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-bookdown.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-highlight.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-search.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-fontsettings.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-clipboard.css" rel="stylesheet" />









<script src="libs/htmlwidgets-1.5.3/htmlwidgets.js"></script>
<script src="libs/plotly-binding-4.9.3/plotly.js"></script>
<script src="libs/typedarray-0.1/typedarray.min.js"></script>
<link href="libs/crosstalk-1.1.1/css/crosstalk.css" rel="stylesheet" />
<script src="libs/crosstalk-1.1.1/js/crosstalk.min.js"></script>
<link href="libs/plotly-htmlwidgets-css-1.57.1/plotly-htmlwidgets.css" rel="stylesheet" />
<script src="libs/plotly-main-1.57.1/plotly-latest.min.js"></script>
<script src="libs/core-js-2.5.3/shim.min.js"></script>
<script src="libs/react-16.12.0/react.min.js"></script>
<script src="libs/react-16.12.0/react-dom.min.js"></script>
<script src="libs/reactwidget-1.0.0/react-tools.js"></script>
<script src="libs/reactable-binding-0.2.3/reactable.js"></script>
<script src="libs/r2d3-render-0.1.0/r2d3-render.js"></script>
<script src="libs/webcomponents-2.0.0/webcomponents.js"></script>
<script src="libs/r2d3-binding-0.2.5/r2d3.js"></script>
<script src="libs/d3v6-6.2.0/d3.min.js"></script>
<script src="libs/viz-1.8.2/viz.js"></script>
<link href="libs/DiagrammeR-styles-0.2/styles.css" rel="stylesheet" />
<script src="libs/grViz-binding-1.0.6.1/grViz.js"></script>
<link href="libs/datatables-css-0.0.0/datatables-crosstalk.css" rel="stylesheet" />
<script src="libs/datatables-binding-0.17/datatables.js"></script>
<link href="libs/dt-core-1.10.20/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="libs/dt-core-1.10.20/css/jquery.dataTables.extra.css" rel="stylesheet" />
<script src="libs/dt-core-1.10.20/js/jquery.dataTables.min.js"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-74544116-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-74544116-1');
</script>
<meta property="og:title" content="Chapter 7 The Full Monty | JavaScript for R">
<meta property="og:description" content="Book on using JavaScript with R for visualisations, web development, and computations.">
<meta property="og:image" content="https://book.javascript-for-r.com/images/social.png">
<meta property="og:url" content="https://book.javascript-for-r.com/">
<meta name="twitter:card" content="summary_large_image">
<meta property="og:site_name" content="Chapter 7 The Full Monty | JavaScript for R">
<meta name="twitter:image:alt" content="Book on using JavaScript with R for visualisations, web development, and computations.">
<meta name="twitter:site" content="@jdatap">


<style type="text/css">
a.sourceLine { display: inline-block; line-height: 1.25; }
a.sourceLine { pointer-events: none; color: inherit; text-decoration: inherit; }
a.sourceLine:empty { height: 1.2em; }
.sourceCode { overflow: visible; }
code.sourceCode { white-space: pre; position: relative; }
pre.sourceCode { margin: 0; }
@media screen {
div.sourceCode { overflow: auto; }
}
@media print {
code.sourceCode { white-space: pre-wrap; }
a.sourceLine { text-indent: -1em; padding-left: 1em; }
}
pre.numberSource a.sourceLine
  { position: relative; left: -4em; }
pre.numberSource a.sourceLine::before
  { content: attr(title);
    position: relative; left: -1em; text-align: right; vertical-align: baseline;
    border: none; pointer-events: all; display: inline-block;
    -webkit-touch-callout: none; -webkit-user-select: none;
    -khtml-user-select: none; -moz-user-select: none;
    -ms-user-select: none; user-select: none;
    padding: 0 4px; width: 4em;
    color: #aaaaaa;
  }
pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa;  padding-left: 4px; }
div.sourceCode
  {  }
@media screen {
a.sourceLine::before { text-decoration: underline; }
}
code span.al { color: #ff0000; font-weight: bold; } /* Alert */
code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
code span.at { color: #7d9029; } /* Attribute */
code span.bn { color: #40a070; } /* BaseN */
code span.bu { } /* BuiltIn */
code span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
code span.ch { color: #4070a0; } /* Char */
code span.cn { color: #880000; } /* Constant */
code span.co { color: #60a0b0; font-style: italic; } /* Comment */
code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
code span.do { color: #ba2121; font-style: italic; } /* Documentation */
code span.dt { color: #902000; } /* DataType */
code span.dv { color: #40a070; } /* DecVal */
code span.er { color: #ff0000; font-weight: bold; } /* Error */
code span.ex { } /* Extension */
code span.fl { color: #40a070; } /* Float */
code span.fu { color: #06287e; } /* Function */
code span.im { } /* Import */
code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
code span.kw { color: #007020; font-weight: bold; } /* Keyword */
code span.op { color: #666666; } /* Operator */
code span.ot { color: #007020; } /* Other */
code span.pp { color: #bc7a00; } /* Preprocessor */
code span.sc { color: #4070a0; } /* SpecialChar */
code span.ss { color: #bb6688; } /* SpecialString */
code span.st { color: #4070a0; } /* String */
code span.va { color: #19177c; } /* Variable */
code span.vs { color: #4070a0; } /* VerbatimString */
code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
</style>

<link rel="stylesheet" href="css/style.css" type="text/css" />
<link rel="stylesheet" href="css/toc.css" type="text/css" />
</head>

<body>



  <div class="book without-animation with-summary font-size-2 font-family-1" data-basepath=".">

    <div class="book-summary">
      <nav role="navigation">

<ul class="summary">
<li><a href="./">JavaScript for R</a></li>

<li class="divider"></li>
<li class="chapter" data-level="" data-path="index.html"><a href="index.html"><i class="fa fa-check"></i>Preface</a><ul>
<li class="chapter" data-level="" data-path="index.html"><a href="index.html#premise"><i class="fa fa-check"></i>Premise</a></li>
<li class="chapter" data-level="" data-path="index.html"><a href="index.html#book-structure"><i class="fa fa-check"></i>Book Structure</a></li>
<li class="chapter" data-level="" data-path="index.html"><a href="index.html#acknowledgement"><i class="fa fa-check"></i>Acknowledgement</a></li>
</ul></li>
<li class="part"><span><b>I Basics and Roadmap</b></span></li>
<li class="chapter" data-level="1" data-path="intro-overview.html"><a href="intro-overview.html"><i class="fa fa-check"></i><b>1</b> Overview</a><ul>
<li class="chapter" data-level="1.1" data-path="intro-overview.html"><a href="intro-overview.html#intro-overview-rationale"><i class="fa fa-check"></i><b>1.1</b> Rationale</a></li>
<li class="chapter" data-level="1.2" data-path="intro-overview.html"><a href="intro-overview.html#intro-methods"><i class="fa fa-check"></i><b>1.2</b> Methods</a><ul>
<li class="chapter" data-level="1.2.1" data-path="intro-overview.html"><a href="intro-overview.html#intro-v8"><i class="fa fa-check"></i><b>1.2.1</b> V8</a></li>
<li class="chapter" data-level="1.2.2" data-path="intro-overview.html"><a href="intro-overview.html#intro-htmlwidgets"><i class="fa fa-check"></i><b>1.2.2</b> htmlwidgets</a></li>
<li class="chapter" data-level="1.2.3" data-path="intro-overview.html"><a href="intro-overview.html#intro-shiny"><i class="fa fa-check"></i><b>1.2.3</b> Shiny</a></li>
</ul></li>
<li class="chapter" data-level="1.3" data-path="intro-overview.html"><a href="intro-overview.html#intro-amiss"><i class="fa fa-check"></i><b>1.3</b> Methods Amiss</a><ul>
<li class="chapter" data-level="1.3.1" data-path="intro-overview.html"><a href="intro-overview.html#intro-reactr-vuer"><i class="fa fa-check"></i><b>1.3.1</b> reactR &amp; vueR</a></li>
<li class="chapter" data-level="1.3.2" data-path="intro-overview.html"><a href="intro-overview.html#intro-r2d3"><i class="fa fa-check"></i><b>1.3.2</b> r2d3</a></li>
</ul></li>
</ul></li>
<li class="chapter" data-level="2" data-path="prerequisites.html"><a href="prerequisites.html"><i class="fa fa-check"></i><b>2</b> Prerequisites</a><ul>
<li class="chapter" data-level="2.1" data-path="prerequisites.html"><a href="prerequisites.html#basics-package-dev"><i class="fa fa-check"></i><b>2.1</b> R Package Development</a><ul>
<li class="chapter" data-level="2.1.1" data-path="prerequisites.html"><a href="prerequisites.html#basics-create-pkg"><i class="fa fa-check"></i><b>2.1.1</b> Creating a Package</a></li>
<li class="chapter" data-level="2.1.2" data-path="prerequisites.html"><a href="prerequisites.html#basics-metadata"><i class="fa fa-check"></i><b>2.1.2</b> Metadata</a></li>
<li class="chapter" data-level="2.1.3" data-path="prerequisites.html"><a href="prerequisites.html#basics-r-code"><i class="fa fa-check"></i><b>2.1.3</b> R code</a></li>
<li class="chapter" data-level="2.1.4" data-path="prerequisites.html"><a href="prerequisites.html#basics-documentation"><i class="fa fa-check"></i><b>2.1.4</b> Documentation</a></li>
<li class="chapter" data-level="2.1.5" data-path="prerequisites.html"><a href="prerequisites.html#basics-installed-files"><i class="fa fa-check"></i><b>2.1.5</b> Installed files</a></li>
<li class="chapter" data-level="2.1.6" data-path="prerequisites.html"><a href="prerequisites.html#basics-build-load-install"><i class="fa fa-check"></i><b>2.1.6</b> Build, load, and install</a></li>
</ul></li>
<li class="chapter" data-level="2.2" data-path="prerequisites.html"><a href="prerequisites.html#basics-json"><i class="fa fa-check"></i><b>2.2</b> JSON</a><ul>
<li class="chapter" data-level="2.2.1" data-path="prerequisites.html"><a href="prerequisites.html#serialising"><i class="fa fa-check"></i><b>2.2.1</b> Serialising</a></li>
<li class="chapter" data-level="2.2.2" data-path="prerequisites.html"><a href="prerequisites.html#basics-tabular"><i class="fa fa-check"></i><b>2.2.2</b> Tabular Data</a></li>
</ul></li>
<li class="chapter" data-level="2.3" data-path="prerequisites.html"><a href="prerequisites.html#basics-javascript"><i class="fa fa-check"></i><b>2.3</b> JavaScript</a><ul>
<li class="chapter" data-level="2.3.1" data-path="prerequisites.html"><a href="prerequisites.html#basics-chrome-devtools"><i class="fa fa-check"></i><b>2.3.1</b> Developer Tools</a></li>
<li class="chapter" data-level="2.3.2" data-path="prerequisites.html"><a href="prerequisites.html#basics-var-scope"><i class="fa fa-check"></i><b>2.3.2</b> Variable Declaration and Scope</a></li>
<li class="chapter" data-level="2.3.3" data-path="prerequisites.html"><a href="prerequisites.html#basics-object-model"><i class="fa fa-check"></i><b>2.3.3</b> Document Object Model</a></li>
</ul></li>
<li class="chapter" data-level="2.4" data-path="prerequisites.html"><a href="prerequisites.html#basics-shiny"><i class="fa fa-check"></i><b>2.4</b> Shiny</a><ul>
<li class="chapter" data-level="2.4.1" data-path="prerequisites.html"><a href="prerequisites.html#basics-static-files"><i class="fa fa-check"></i><b>2.4.1</b> Serving Static Files</a></li>
<li class="chapter" data-level="2.4.2" data-path="prerequisites.html"><a href="prerequisites.html#basics-htmltools"><i class="fa fa-check"></i><b>2.4.2</b> Htmltools</a></li>
<li class="chapter" data-level="2.4.3" data-path="prerequisites.html"><a href="prerequisites.html#basics-deps-pro-cons"><i class="fa fa-check"></i><b>2.4.3</b> Serving vs. htmltools</a></li>
</ul></li>
</ul></li>
<li class="part"><span><b>II Data Visualisation</b></span></li>
<li class="chapter" data-level="3" data-path="widgets-intro-intro.html"><a href="widgets-intro-intro.html"><i class="fa fa-check"></i><b>3</b> Introduction to Widgets</a><ul>
<li class="chapter" data-level="3.1" data-path="widgets-intro-intro.html"><a href="widgets-intro-intro.html#widgets-plotly"><i class="fa fa-check"></i><b>3.1</b> Plotly package</a></li>
<li class="chapter" data-level="3.2" data-path="widgets-intro-intro.html"><a href="widgets-intro-intro.html#widgets-intro-dt"><i class="fa fa-check"></i><b>3.2</b> DT package</a></li>
<li class="chapter" data-level="3.3" data-path="widgets-intro-intro.html"><a href="widgets-intro-intro.html#widgets-intro-crosstalk"><i class="fa fa-check"></i><b>3.3</b> Crosstalk</a></li>
<li class="chapter" data-level="3.4" data-path="widgets-intro-intro.html"><a href="widgets-intro-intro.html#widgets-intro-conclude"><i class="fa fa-check"></i><b>3.4</b> Wrap-up</a></li>
</ul></li>
<li class="chapter" data-level="4" data-path="widgets-basics.html"><a href="widgets-basics.html"><i class="fa fa-check"></i><b>4</b> Basics of Building Widgets</a><ul>
<li class="chapter" data-level="4.1" data-path="widgets-basics.html"><a href="widgets-basics.html#widgets-basics-study"><i class="fa fa-check"></i><b>4.1</b> Read and Study</a></li>
<li class="chapter" data-level="4.2" data-path="widgets-basics.html"><a href="widgets-basics.html#widgets-basics-candidates"><i class="fa fa-check"></i><b>4.2</b> Candidate Libraries</a><ul>
<li class="chapter" data-level="4.2.1" data-path="widgets-basics.html"><a href="widgets-basics.html#widgets-basics-candidates-plotly"><i class="fa fa-check"></i><b>4.2.1</b> Plotly.js</a></li>
<li class="chapter" data-level="4.2.2" data-path="widgets-basics.html"><a href="widgets-basics.html#widgets-basics-candidates-highcharts"><i class="fa fa-check"></i><b>4.2.2</b> Highchart.js</a></li>
<li class="chapter" data-level="4.2.3" data-path="widgets-basics.html"><a href="widgets-basics.html#widgets-basics-candidates-chart.js"><i class="fa fa-check"></i><b>4.2.3</b> Chart.js</a></li>
</ul></li>
<li class="chapter" data-level="4.3" data-path="widgets-basics.html"><a href="widgets-basics.html#widgets-basics-inner-workings"><i class="fa fa-check"></i><b>4.3</b> How It Works</a></li>
</ul></li>
<li class="chapter" data-level="5" data-path="widgets-first.html"><a href="widgets-first.html"><i class="fa fa-check"></i><b>5</b> Your First Widget</a><ul>
<li class="chapter" data-level="5.1" data-path="widgets-first.html"><a href="widgets-first.html#widgets-first-scaffold"><i class="fa fa-check"></i><b>5.1</b> The Scaffold</a></li>
<li class="chapter" data-level="5.2" data-path="widgets-first.html"><a href="widgets-first.html#widgets-first-htmloutput"><i class="fa fa-check"></i><b>5.2</b> The HTML Output</a></li>
<li class="chapter" data-level="5.3" data-path="widgets-first.html"><a href="widgets-first.html#widgets-first-js-files"><i class="fa fa-check"></i><b>5.3</b> JavaScript Files</a></li>
</ul></li>
<li class="chapter" data-level="6" data-path="widgets-realistic.html"><a href="widgets-realistic.html"><i class="fa fa-check"></i><b>6</b> A Realistic Widget</a><ul>
<li class="chapter" data-level="6.1" data-path="widgets-realistic.html"><a href="widgets-realistic.html#widgets-realistic-deps"><i class="fa fa-check"></i><b>6.1</b> Dependencies</a></li>
<li class="chapter" data-level="6.2" data-path="widgets-realistic.html"><a href="widgets-realistic.html#widgets-realistic-implementation"><i class="fa fa-check"></i><b>6.2</b> Implementation</a></li>
<li class="chapter" data-level="6.3" data-path="widgets-realistic.html"><a href="widgets-realistic.html#widgets-realistic-html-element"><i class="fa fa-check"></i><b>6.3</b> HTML Element</a></li>
</ul></li>
<li class="chapter" data-level="7" data-path="widgets-full.html"><a href="widgets-full.html"><i class="fa fa-check"></i><b>7</b> The Full Monty</a><ul>
<li class="chapter" data-level="7.1" data-path="widgets-full.html"><a href="widgets-full.html#widgets-full-deps"><i class="fa fa-check"></i><b>7.1</b> Dependencies</a></li>
<li class="chapter" data-level="7.2" data-path="widgets-full.html"><a href="widgets-full.html#widgets-full-js"><i class="fa fa-check"></i><b>7.2</b> JavaScript</a></li>
<li class="chapter" data-level="7.3" data-path="widgets-full.html"><a href="widgets-full.html#widgets-full-data"><i class="fa fa-check"></i><b>7.3</b> Working with Data</a></li>
<li class="chapter" data-level="7.4" data-path="widgets-full.html"><a href="widgets-full.html#widgets-full-transform-data"><i class="fa fa-check"></i><b>7.4</b> Transforming Data</a><ul>
<li class="chapter" data-level="7.4.1" data-path="widgets-full.html"><a href="widgets-full.html#widgets-full-transform-data-js"><i class="fa fa-check"></i><b>7.4.1</b> Using JavaScript</a></li>
<li class="chapter" data-level="7.4.2" data-path="widgets-full.html"><a href="widgets-full.html#widgets-full-transform-data-modify"><i class="fa fa-check"></i><b>7.4.2</b> Modify Serialiser</a></li>
<li class="chapter" data-level="7.4.3" data-path="widgets-full.html"><a href="widgets-full.html#widgets-full-transform-data-replace"><i class="fa fa-check"></i><b>7.4.3</b> Replace Serialiser</a></li>
<li class="chapter" data-level="7.4.4" data-path="widgets-full.html"><a href="widgets-full.html#widgets-full-transform-data-modify-data"><i class="fa fa-check"></i><b>7.4.4</b> Modify the Data</a></li>
<li class="chapter" data-level="7.4.5" data-path="widgets-full.html"><a href="widgets-full.html#widgets-full-transform-data-conclusion"><i class="fa fa-check"></i><b>7.4.5</b> Pros and Cons</a></li>
</ul></li>
<li class="chapter" data-level="7.5" data-path="widgets-full.html"><a href="widgets-full.html#widgets-full-on-print"><i class="fa fa-check"></i><b>7.5</b> On Print Method</a></li>
</ul></li>
<li class="chapter" data-level="8" data-path="widgets-adv.html"><a href="widgets-adv.html"><i class="fa fa-check"></i><b>8</b> Advanced Topics</a><ul>
<li class="chapter" data-level="8.1" data-path="widgets-adv.html"><a href="widgets-adv.html#widgets-adv-shared"><i class="fa fa-check"></i><b>8.1</b> Shared Variables</a><ul>
<li class="chapter" data-level="8.1.1" data-path="widgets-adv.html"><a href="widgets-adv.html#widgets-adv-sizing"><i class="fa fa-check"></i><b>8.1.1</b> Sizing</a></li>
<li class="chapter" data-level="8.1.2" data-path="widgets-adv.html"><a href="widgets-adv.html#widgets-adv-sizing-policy"><i class="fa fa-check"></i><b>8.1.2</b> Sizing Policy</a></li>
</ul></li>
<li class="chapter" data-level="8.2" data-path="widgets-adv.html"><a href="widgets-adv.html#widgets-adv-resizing"><i class="fa fa-check"></i><b>8.2</b> Resizing</a></li>
<li class="chapter" data-level="8.3" data-path="widgets-adv.html"><a href="widgets-adv.html#widgets-adv-prerender"><i class="fa fa-check"></i><b>8.3</b> Pre Render Hooks and Security</a></li>
<li class="chapter" data-level="8.4" data-path="widgets-adv.html"><a href="widgets-adv.html#widgets-adv-js"><i class="fa fa-check"></i><b>8.4</b> JavaScript Code</a></li>
<li class="chapter" data-level="8.5" data-path="widgets-adv.html"><a href="widgets-adv.html#widgets-adv-prepend-append"><i class="fa fa-check"></i><b>8.5</b> Prepend and Append Content</a></li>
<li class="chapter" data-level="8.6" data-path="widgets-adv.html"><a href="widgets-adv.html#widgets-adv-dependencies"><i class="fa fa-check"></i><b>8.6</b> Dependencies</a></li>
<li class="chapter" data-level="8.7" data-path="widgets-adv.html"><a href="widgets-adv.html#widgets-adv-compatibility"><i class="fa fa-check"></i><b>8.7</b> Compatibility</a></li>
<li class="chapter" data-level="8.8" data-path="widgets-adv.html"><a href="widgets-adv.html#widgets-adv-unit-tests"><i class="fa fa-check"></i><b>8.8</b> Unit Tests</a></li>
<li class="chapter" data-level="8.9" data-path="widgets-adv.html"><a href="widgets-adv.html#widgets-adv-performances"><i class="fa fa-check"></i><b>8.9</b> Performances</a></li>
</ul></li>
<li class="chapter" data-level="9" data-path="linking-widgets.html"><a href="linking-widgets.html"><i class="fa fa-check"></i><b>9</b> Linking Widgets</a><ul>
<li class="chapter" data-level="9.1" data-path="linking-widgets.html"><a href="linking-widgets.html#linking-widgets-examples"><i class="fa fa-check"></i><b>9.1</b> Crosstalk Examples</a></li>
<li class="chapter" data-level="9.2" data-path="linking-widgets.html"><a href="linking-widgets.html#linking-widgets-req"><i class="fa fa-check"></i><b>9.2</b> Crosstalk Requirements</a></li>
<li class="chapter" data-level="9.3" data-path="linking-widgets.html"><a href="linking-widgets.html#linking-widgets-inner-workings"><i class="fa fa-check"></i><b>9.3</b> How it Works</a><ul>
<li class="chapter" data-level="9.3.1" data-path="linking-widgets.html"><a href="linking-widgets.html#linking-widgets-keys"><i class="fa fa-check"></i><b>9.3.1</b> Keys</a></li>
<li class="chapter" data-level="9.3.2" data-path="linking-widgets.html"><a href="linking-widgets.html#linking-widgets-communication-lines"><i class="fa fa-check"></i><b>9.3.2</b> Communication Lines</a></li>
<li class="chapter" data-level="9.3.3" data-path="linking-widgets.html"><a href="linking-widgets.html#linking-widgets-groups"><i class="fa fa-check"></i><b>9.3.3</b> Groups</a></li>
</ul></li>
<li class="chapter" data-level="9.4" data-path="linking-widgets.html"><a href="linking-widgets.html#linking-widgets-gio"><i class="fa fa-check"></i><b>9.4</b> Crosstalk with Gio</a></li>
<li class="chapter" data-level="9.5" data-path="linking-widgets.html"><a href="linking-widgets.html#linking-widgets-r"><i class="fa fa-check"></i><b>9.5</b> R code</a></li>
<li class="chapter" data-level="9.6" data-path="linking-widgets.html"><a href="linking-widgets.html#linking-widgets-js"><i class="fa fa-check"></i><b>9.6</b> JavaScript Code</a><ul>
<li class="chapter" data-level="9.6.1" data-path="linking-widgets.html"><a href="linking-widgets.html#linking-widgets-send-keys"><i class="fa fa-check"></i><b>9.6.1</b> Send Selected Keys</a></li>
<li class="chapter" data-level="9.6.2" data-path="linking-widgets.html"><a href="linking-widgets.html#linking-widgets-set-keys"><i class="fa fa-check"></i><b>9.6.2</b> Set Selected Keys</a></li>
</ul></li>
<li class="chapter" data-level="9.7" data-path="linking-widgets.html"><a href="linking-widgets.html#linking-widgets-using"><i class="fa fa-check"></i><b>9.7</b> Using Crosstalk with Gio</a></li>
</ul></li>
<li class="chapter" data-level="10" data-path="widgets-final.html"><a href="widgets-final.html"><i class="fa fa-check"></i><b>10</b> Final Revisions</a><ul>
<li class="chapter" data-level="10.1" data-path="widgets-final.html"><a href="widgets-final.html#widgets-final-data"><i class="fa fa-check"></i><b>10.1</b> Htmlwidgets and Data</a></li>
<li class="chapter" data-level="10.2" data-path="widgets-final.html"><a href="widgets-final.html#widgets-final-options"><i class="fa fa-check"></i><b>10.2</b> Plethora of Options</a></li>
<li class="chapter" data-level="10.3" data-path="widgets-final.html"><a href="widgets-final.html#widgets-final-interface"><i class="fa fa-check"></i><b>10.3</b> Interface Design</a></li>
<li class="chapter" data-level="10.4" data-path="widgets-final.html"><a href="widgets-final.html#widgets-final-exercises"><i class="fa fa-check"></i><b>10.4</b> Exercises</a></li>
</ul></li>
<li class="part"><span><b>III Web Development with Shiny</b></span></li>
<li class="chapter" data-level="11" data-path="shiny-intro.html"><a href="shiny-intro.html"><i class="fa fa-check"></i><b>11</b> Bidirectional Communication</a><ul>
<li class="chapter" data-level="11.1" data-path="shiny-intro.html"><a href="shiny-intro.html#shiny-intro-websocket"><i class="fa fa-check"></i><b>11.1</b> WebSocket an Shiny</a></li>
<li class="chapter" data-level="11.2" data-path="shiny-intro.html"><a href="shiny-intro.html#shiny-intro-sessions"><i class="fa fa-check"></i><b>11.2</b> Sessions</a></li>
<li class="chapter" data-level="11.3" data-path="shiny-intro.html"><a href="shiny-intro.html#shiny-intro-example"><i class="fa fa-check"></i><b>11.3</b> Alerts, an example</a><ul>
<li class="chapter" data-level="11.3.1" data-path="shiny-intro.html"><a href="shiny-intro.html#shiny-intro-explore"><i class="fa fa-check"></i><b>11.3.1</b> Explore</a></li>
<li class="chapter" data-level="11.3.2" data-path="shiny-intro.html"><a href="shiny-intro.html#shiny-intro-r-to-js"><i class="fa fa-check"></i><b>11.3.2</b> From R to JavaScript</a></li>
<li class="chapter" data-level="11.3.3" data-path="shiny-intro.html"><a href="shiny-intro.html#shiny-intro-serialise"><i class="fa fa-check"></i><b>11.3.3</b> Serialisation</a></li>
<li class="chapter" data-level="11.3.4" data-path="shiny-intro.html"><a href="shiny-intro.html#shiny-intro-js2r"><i class="fa fa-check"></i><b>11.3.4</b> JavaScript to R</a></li>
</ul></li>
</ul></li>
<li class="chapter" data-level="12" data-path="shiny-complete.html"><a href="shiny-complete.html"><i class="fa fa-check"></i><b>12</b> A Complete Integration</a><ul>
<li class="chapter" data-level="12.1" data-path="shiny-complete.html"><a href="shiny-complete.html#shiny-complete-discover"><i class="fa fa-check"></i><b>12.1</b> Discover</a></li>
<li class="chapter" data-level="12.2" data-path="shiny-complete.html"><a href="shiny-complete.html#shiny-complete-setup"><i class="fa fa-check"></i><b>12.2</b> Setup</a></li>
<li class="chapter" data-level="12.3" data-path="shiny-complete.html"><a href="shiny-complete.html#shiny-complete-dependencies"><i class="fa fa-check"></i><b>12.3</b> Dependencies</a></li>
<li class="chapter" data-level="12.4" data-path="shiny-complete.html"><a href="shiny-complete.html#shiny-complete-images"><i class="fa fa-check"></i><b>12.4</b> Static Files</a></li>
<li class="chapter" data-level="12.5" data-path="shiny-complete.html"><a href="shiny-complete.html#shiny-complete-skeleton"><i class="fa fa-check"></i><b>12.5</b> Skeleton</a></li>
<li class="chapter" data-level="12.6" data-path="shiny-complete.html"><a href="shiny-complete.html#shiny-complete-r2js"><i class="fa fa-check"></i><b>12.6</b> From R to JavaScript</a></li>
<li class="chapter" data-level="12.7" data-path="shiny-complete.html"><a href="shiny-complete.html#shiny-complete-js2r"><i class="fa fa-check"></i><b>12.7</b> From JavaScript to R</a></li>
<li class="chapter" data-level="12.8" data-path="shiny-complete.html"><a href="shiny-complete.html#shiny-complete-input-handler"><i class="fa fa-check"></i><b>12.8</b> Input handler</a></li>
<li class="chapter" data-level="12.9" data-path="shiny-complete.html"><a href="shiny-complete.html#shiny-complete-pkg"><i class="fa fa-check"></i><b>12.9</b> As a Package</a><ul>
<li class="chapter" data-level="12.9.1" data-path="shiny-complete.html"><a href="shiny-complete.html#shiny-complete-pkg-deps"><i class="fa fa-check"></i><b>12.9.1</b> Dependencies</a></li>
<li class="chapter" data-level="12.9.2" data-path="shiny-complete.html"><a href="shiny-complete.html#shiny-complete-pkg-trigger"><i class="fa fa-check"></i><b>12.9.2</b> Trigger classification</a></li>
<li class="chapter" data-level="12.9.3" data-path="shiny-complete.html"><a href="shiny-complete.html#shiny-complete-pkg-js-code"><i class="fa fa-check"></i><b>12.9.3</b> JavaScript code</a></li>
<li class="chapter" data-level="12.9.4" data-path="shiny-complete.html"><a href="shiny-complete.html#shiny-complete-pkg-input-handler"><i class="fa fa-check"></i><b>12.9.4</b> Input handler</a></li>
<li class="chapter" data-level="12.9.5" data-path="shiny-complete.html"><a href="shiny-complete.html#shiny-complete-pkg-test"><i class="fa fa-check"></i><b>12.9.5</b> Test</a></li>
</ul></li>
</ul></li>
<li class="chapter" data-level="13" data-path="shiny-tips.html"><a href="shiny-tips.html"><i class="fa fa-check"></i><b>13</b> Tips and Tricks</a><ul>
<li class="chapter" data-level="13.1" data-path="shiny-tips.html"><a href="shiny-tips.html#shiny-tips-events"><i class="fa fa-check"></i><b>13.1</b> Shiny Events</a></li>
<li class="chapter" data-level="13.2" data-path="shiny-tips.html"><a href="shiny-tips.html#shiny-tips-table-btn"><i class="fa fa-check"></i><b>13.2</b> Table Buttons</a></li>
<li class="chapter" data-level="13.3" data-path="shiny-tips.html"><a href="shiny-tips.html#shiny-tips-jQuery"><i class="fa fa-check"></i><b>13.3</b> jQuery</a></li>
</ul></li>
<li class="chapter" data-level="14" data-path="shiny-output.html"><a href="shiny-output.html"><i class="fa fa-check"></i><b>14</b> Custom Outputs</a><ul>
<li class="chapter" data-level="14.1" data-path="shiny-output.html"><a href="shiny-output.html#shiny-output-inner-workings"><i class="fa fa-check"></i><b>14.1</b> Inner-workings</a></li>
<li class="chapter" data-level="14.2" data-path="shiny-output.html"><a href="shiny-output.html#shiny-output-setup"><i class="fa fa-check"></i><b>14.2</b> Setup</a></li>
<li class="chapter" data-level="14.3" data-path="shiny-output.html"><a href="shiny-output.html#shiny-output-r-fun"><i class="fa fa-check"></i><b>14.3</b> Output R Function</a></li>
<li class="chapter" data-level="14.4" data-path="shiny-output.html"><a href="shiny-output.html#shiny-output-html"><i class="fa fa-check"></i><b>14.4</b> Generate Output HTML</a></li>
<li class="chapter" data-level="14.5" data-path="shiny-output.html"><a href="shiny-output.html#shiny-output-renderer"><i class="fa fa-check"></i><b>14.5</b> Output Renderer</a></li>
<li class="chapter" data-level="14.6" data-path="shiny-output.html"><a href="shiny-output.html#shiny-output-binding"><i class="fa fa-check"></i><b>14.6</b> JavaScript Output Binding</a><ul>
<li class="chapter" data-level="14.6.1" data-path="shiny-output.html"><a href="shiny-output.html#shiny-output-boxxy-title"><i class="fa fa-check"></i><b>14.6.1</b> Boxxy Title</a></li>
<li class="chapter" data-level="14.6.2" data-path="shiny-output.html"><a href="shiny-output.html#shiny-output-boxxy-value"><i class="fa fa-check"></i><b>14.6.2</b> Boxxy Value</a></li>
<li class="chapter" data-level="14.6.3" data-path="shiny-output.html"><a href="shiny-output.html#shiny-output-boxxy-bg-color"><i class="fa fa-check"></i><b>14.6.3</b> Boxxy Background Color</a></li>
<li class="chapter" data-level="14.6.4" data-path="shiny-output.html"><a href="shiny-output.html#shiny-output-register"><i class="fa fa-check"></i><b>14.6.4</b> Register the Output Binding</a></li>
</ul></li>
<li class="chapter" data-level="14.7" data-path="shiny-output.html"><a href="shiny-output.html#shiny-output-usage"><i class="fa fa-check"></i><b>14.7</b> Boxxy Usage</a></li>
<li class="chapter" data-level="14.8" data-path="shiny-output.html"><a href="shiny-output.html#shiny-output-inject"><i class="fa fa-check"></i><b>14.8</b> Injecting Dependencies</a></li>
<li class="chapter" data-level="14.9" data-path="shiny-output.html"><a href="shiny-output.html#shiny-output-preprocess"><i class="fa fa-check"></i><b>14.9</b> Preprocessing Custom Outputs</a></li>
</ul></li>
<li class="chapter" data-level="15" data-path="shiny-input.html"><a href="shiny-input.html"><i class="fa fa-check"></i><b>15</b> Custom Inputs</a><ul>
<li class="chapter" data-level="15.1" data-path="shiny-input.html"><a href="shiny-input.html#shiny-input-setup"><i class="fa fa-check"></i><b>15.1</b> Setup</a></li>
<li class="chapter" data-level="15.2" data-path="shiny-input.html"><a href="shiny-input.html#shiny-input-intro"><i class="fa fa-check"></i><b>15.2</b> Switch Input HTML and Style</a></li>
<li class="chapter" data-level="15.3" data-path="shiny-input.html"><a href="shiny-input.html#shiny-input-html"><i class="fa fa-check"></i><b>15.3</b> Generate Input HTML</a></li>
<li class="chapter" data-level="15.4" data-path="shiny-input.html"><a href="shiny-input.html#shiny-input-binding"><i class="fa fa-check"></i><b>15.4</b> JavaScript Input Binding</a><ul>
<li class="chapter" data-level="15.4.1" data-path="shiny-input.html"><a href="shiny-input.html#shiny-input-find"><i class="fa fa-check"></i><b>15.4.1</b> Find Inputs</a></li>
<li class="chapter" data-level="15.4.2" data-path="shiny-input.html"><a href="shiny-input.html#shiny-input-get-id"><i class="fa fa-check"></i><b>15.4.2</b> Get Input Id</a></li>
<li class="chapter" data-level="15.4.3" data-path="shiny-input.html"><a href="shiny-input.html#shiny-input-get-value"><i class="fa fa-check"></i><b>15.4.3</b> Get Input Value</a></li>
<li class="chapter" data-level="15.4.4" data-path="shiny-input.html"><a href="shiny-input.html#shiny-input-set-value"><i class="fa fa-check"></i><b>15.4.4</b> Set Input Value</a></li>
<li class="chapter" data-level="15.4.5" data-path="shiny-input.html"><a href="shiny-input.html#shiny-input-receive-msg"><i class="fa fa-check"></i><b>15.4.5</b> Receive Input Messages</a></li>
<li class="chapter" data-level="15.4.6" data-path="shiny-input.html"><a href="shiny-input.html#shiny-input-sub-unsub"><i class="fa fa-check"></i><b>15.4.6</b> Subscribe and Unsubscribe Inputs</a></li>
<li class="chapter" data-level="15.4.7" data-path="shiny-input.html"><a href="shiny-input.html#shiny-input-rate-policy"><i class="fa fa-check"></i><b>15.4.7</b> Input Rate Policy</a></li>
<li class="chapter" data-level="15.4.8" data-path="shiny-input.html"><a href="shiny-input.html#shiny-input-register"><i class="fa fa-check"></i><b>15.4.8</b> Registering the Input Binding</a></li>
</ul></li>
<li class="chapter" data-level="15.5" data-path="shiny-input.html"><a href="shiny-input.html#shiny-input-update"><i class="fa fa-check"></i><b>15.5</b> Update Input</a></li>
<li class="chapter" data-level="15.6" data-path="shiny-input.html"><a href="shiny-input.html#shiny-input-excercise"><i class="fa fa-check"></i><b>15.6</b> Exercise</a></li>
</ul></li>
<li class="chapter" data-level="16" data-path="shiny-cookies.html"><a href="shiny-cookies.html"><i class="fa fa-check"></i><b>16</b> Cookies</a><ul>
<li class="chapter" data-level="16.1" data-path="shiny-cookies.html"><a href="shiny-cookies.html#shiny-cookies-discover"><i class="fa fa-check"></i><b>16.1</b> Discover js-cookie</a></li>
<li class="chapter" data-level="16.2" data-path="shiny-cookies.html"><a href="shiny-cookies.html#shiny-cookies-setup"><i class="fa fa-check"></i><b>16.2</b> Setup Project</a></li>
<li class="chapter" data-level="16.3" data-path="shiny-cookies.html"><a href="shiny-cookies.html#shiny-cookies-javascript"><i class="fa fa-check"></i><b>16.3</b> JavaScript Cookies</a></li>
<li class="chapter" data-level="16.4" data-path="shiny-cookies.html"><a href="shiny-cookies.html#shiny-cookies-r-code"><i class="fa fa-check"></i><b>16.4</b> R Code</a></li>
<li class="chapter" data-level="16.5" data-path="shiny-cookies.html"><a href="shiny-cookies.html#shiny-cookies-exercises"><i class="fa fa-check"></i><b>16.5</b> Exercises</a></li>
</ul></li>
<li class="chapter" data-level="17" data-path="shiny-widgets.html"><a href="shiny-widgets.html"><i class="fa fa-check"></i><b>17</b> Widgets with Shiny</a><ul>
<li class="chapter" data-level="17.1" data-path="shiny-widgets.html"><a href="shiny-widgets.html#shiny-widgets-to-r"><i class="fa fa-check"></i><b>17.1</b> Widgets to R</a></li>
<li class="chapter" data-level="17.2" data-path="shiny-widgets.html"><a href="shiny-widgets.html#shiny-widgets-handlers"><i class="fa fa-check"></i><b>17.2</b> Input Handlers for Widgets</a></li>
<li class="chapter" data-level="17.3" data-path="shiny-widgets.html"><a href="shiny-widgets.html#shiny-widgets-r-to-widgets"><i class="fa fa-check"></i><b>17.3</b> R to Widgets</a><ul>
<li class="chapter" data-level="17.3.1" data-path="shiny-widgets.html"><a href="shiny-widgets.html#shiny-widgets-send-data"><i class="fa fa-check"></i><b>17.3.1</b> Send Data from Widgets</a></li>
<li class="chapter" data-level="17.3.2" data-path="shiny-widgets.html"><a href="shiny-widgets.html#shiny-widgets-retrieve"><i class="fa fa-check"></i><b>17.3.2</b> Retrieve Widget Instance</a></li>
<li class="chapter" data-level="17.3.3" data-path="shiny-widgets.html"><a href="shiny-widgets.html#shiny-widgets-handle-data"><i class="fa fa-check"></i><b>17.3.3</b> Handle Data</a></li>
</ul></li>
<li class="chapter" data-level="17.4" data-path="shiny-widgets.html"><a href="shiny-widgets.html#shiny-widgets-proxy"><i class="fa fa-check"></i><b>17.4</b> Proxy Function</a></li>
<li class="chapter" data-level="17.5" data-path="shiny-widgets.html"><a href="shiny-widgets.html#shiny-widgets-clear-data"><i class="fa fa-check"></i><b>17.5</b> Clear Data</a></li>
<li class="chapter" data-level="17.6" data-path="shiny-widgets.html"><a href="shiny-widgets.html#shiny-widgets-update"><i class="fa fa-check"></i><b>17.6</b> Update the Widget</a></li>
</ul></li>
<li class="part"><span><b>IV JavaScript for Computations</b></span></li>
<li class="chapter" data-level="18" data-path="v8.html"><a href="v8.html"><i class="fa fa-check"></i><b>18</b> The V8 Engine</a><ul>
<li class="chapter" data-level="18.1" data-path="v8.html"><a href="v8.html#v8-installation"><i class="fa fa-check"></i><b>18.1</b> Installation</a></li>
<li class="chapter" data-level="18.2" data-path="v8.html"><a href="v8.html#v8-basics"><i class="fa fa-check"></i><b>18.2</b> Basics</a></li>
<li class="chapter" data-level="18.3" data-path="v8.html"><a href="v8.html#v8-external"><i class="fa fa-check"></i><b>18.3</b> External Libraries</a></li>
<li class="chapter" data-level="18.4" data-path="v8.html"><a href="v8.html#v8-npm"><i class="fa fa-check"></i><b>18.4</b> NPM Packages</a></li>
<li class="chapter" data-level="18.5" data-path="v8.html"><a href="v8.html#v8-pkg"><i class="fa fa-check"></i><b>18.5</b> Use in Packages</a></li>
</ul></li>
<li class="chapter" data-level="19" data-path="v8-ml.html"><a href="v8-ml.html"><i class="fa fa-check"></i><b>19</b> Machine Learning</a><ul>
<li class="chapter" data-level="19.1" data-path="v8-ml.html"><a href="v8-ml.html#v8-ml-dependency"><i class="fa fa-check"></i><b>19.1</b> Dependency</a></li>
<li class="chapter" data-level="19.2" data-path="v8-ml.html"><a href="v8-ml.html#v8-ml-regression"><i class="fa fa-check"></i><b>19.2</b> Simple Regression</a></li>
<li class="chapter" data-level="19.3" data-path="v8-ml.html"><a href="v8-ml.html#v8-ml-exercises"><i class="fa fa-check"></i><b>19.3</b> Exercises</a></li>
</ul></li>
<li class="part"><span><b>V Robust JavaScript</b></span></li>
<li class="chapter" data-level="20" data-path="webpack-intro.html"><a href="webpack-intro.html"><i class="fa fa-check"></i><b>20</b> Managing JavaScript</a><ul>
<li class="chapter" data-level="20.1" data-path="webpack-intro.html"><a href="webpack-intro.html#webpack-example"><i class="fa fa-check"></i><b>20.1</b> Example</a></li>
<li class="chapter" data-level="20.2" data-path="webpack-intro.html"><a href="webpack-intro.html#webpack-browser"><i class="fa fa-check"></i><b>20.2</b> Transpiling</a></li>
<li class="chapter" data-level="20.3" data-path="webpack-intro.html"><a href="webpack-intro.html#webpack-minification"><i class="fa fa-check"></i><b>20.3</b> Minification</a></li>
<li class="chapter" data-level="20.4" data-path="webpack-intro.html"><a href="webpack-intro.html#webpack-structure"><i class="fa fa-check"></i><b>20.4</b> Bundling and Modules</a></li>
<li class="chapter" data-level="20.5" data-path="webpack-intro.html"><a href="webpack-intro.html#webpack-decouple"><i class="fa fa-check"></i><b>20.5</b> Decoupling</a></li>
<li class="chapter" data-level="20.6" data-path="webpack-intro.html"><a href="webpack-intro.html#webpack-npm"><i class="fa fa-check"></i><b>20.6</b> NPM</a></li>
<li class="chapter" data-level="20.7" data-path="webpack-intro.html"><a href="webpack-intro.html#webpack-conclude"><i class="fa fa-check"></i><b>20.7</b> With R</a></li>
</ul></li>
<li class="chapter" data-level="21" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html"><i class="fa fa-check"></i><b>21</b> Discover Webpack and NPM</a><ul>
<li class="chapter" data-level="21.1" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-install"><i class="fa fa-check"></i><b>21.1</b> Installation</a><ul>
<li class="chapter" data-level="21.1.1" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-install-mac"><i class="fa fa-check"></i><b>21.1.1</b> Mac OS</a></li>
<li class="chapter" data-level="21.1.2" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-install-ubuntu"><i class="fa fa-check"></i><b>21.1.2</b> Ubuntu</a></li>
<li class="chapter" data-level="21.1.3" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-install-windows"><i class="fa fa-check"></i><b>21.1.3</b> Windows</a></li>
<li class="chapter" data-level="21.1.4" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-install-other"><i class="fa fa-check"></i><b>21.1.4</b> Other</a></li>
</ul></li>
<li class="chapter" data-level="21.2" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-setup"><i class="fa fa-check"></i><b>21.2</b> Set Up the App</a></li>
<li class="chapter" data-level="21.3" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-init-npm"><i class="fa fa-check"></i><b>21.3</b> Initialise NPM</a></li>
<li class="chapter" data-level="21.4" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-install-pkgs"><i class="fa fa-check"></i><b>21.4</b> Installing NPM Packages</a></li>
<li class="chapter" data-level="21.5" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-entry-points"><i class="fa fa-check"></i><b>21.5</b> Entry Point and Output</a></li>
<li class="chapter" data-level="21.6" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-conf"><i class="fa fa-check"></i><b>21.6</b> Configuration File</a></li>
<li class="chapter" data-level="21.7" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-npm-scripts"><i class="fa fa-check"></i><b>21.7</b> NPM scripts</a></li>
<li class="chapter" data-level="21.8" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-webpack-mode"><i class="fa fa-check"></i><b>21.8</b> Source maps</a></li>
<li class="chapter" data-level="21.9" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-bundle"><i class="fa fa-check"></i><b>21.9</b> Bundle</a></li>
<li class="chapter" data-level="21.10" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-internal-dependencies"><i class="fa fa-check"></i><b>21.10</b> Internal Dependencies</a></li>
<li class="chapter" data-level="21.11" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-external-dependencies"><i class="fa fa-check"></i><b>21.11</b> External Dependencies</a></li>
<li class="chapter" data-level="21.12" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-import-export"><i class="fa fa-check"></i><b>21.12</b> Import and Export</a><ul>
<li class="chapter" data-level="21.12.1" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-import-export-named"><i class="fa fa-check"></i><b>21.12.1</b> Named</a></li>
<li class="chapter" data-level="21.12.2" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-import-export-default"><i class="fa fa-check"></i><b>21.12.2</b> Default</a></li>
<li class="chapter" data-level="21.12.3" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-import-export-wrap-up"><i class="fa fa-check"></i><b>21.12.3</b> Wrap-up</a></li>
</ul></li>
</ul></li>
<li class="chapter" data-level="22" data-path="packer-overview.html"><a href="packer-overview.html"><i class="fa fa-check"></i><b>22</b> Webpack with R</a><ul>
<li class="chapter" data-level="22.1" data-path="packer-overview.html"><a href="packer-overview.html#packer-principles"><i class="fa fa-check"></i><b>22.1</b> Principles of packer</a></li>
<li class="chapter" data-level="22.2" data-path="packer-overview.html"><a href="packer-overview.html#packer-scaffolds"><i class="fa fa-check"></i><b>22.2</b> Scaffolds</a></li>
<li class="chapter" data-level="22.3" data-path="packer-overview.html"><a href="packer-overview.html#packer-inputs"><i class="fa fa-check"></i><b>22.3</b> Inputs</a></li>
<li class="chapter" data-level="22.4" data-path="packer-overview.html"><a href="packer-overview.html#packer-r-file"><i class="fa fa-check"></i><b>22.4</b> R file</a></li>
<li class="chapter" data-level="22.5" data-path="packer-overview.html"><a href="packer-overview.html#packer-js-files"><i class="fa fa-check"></i><b>22.5</b> JavaScript Files</a></li>
<li class="chapter" data-level="22.6" data-path="packer-overview.html"><a href="packer-overview.html#packer-bundle"><i class="fa fa-check"></i><b>22.6</b> Bundle</a></li>
</ul></li>
<li class="chapter" data-level="23" data-path="packer-adv.html"><a href="packer-adv.html"><i class="fa fa-check"></i><b>23</b> Webpack Advanced</a><ul>
<li class="chapter" data-level="23.1" data-path="packer-adv.html"><a href="packer-adv.html#packer-adv-widgets"><i class="fa fa-check"></i><b>23.1</b> Widgets</a></li>
<li class="chapter" data-level="23.2" data-path="packer-adv.html"><a href="packer-adv.html#packer-adv-shiny-vue"><i class="fa fa-check"></i><b>23.2</b> Shiny with Vue and Bootstrap 4</a><ul>
<li class="chapter" data-level="23.2.1" data-path="packer-adv.html"><a href="packer-adv.html#packer-adv-shiny-vue-setup"><i class="fa fa-check"></i><b>23.2.1</b> Setup</a></li>
<li class="chapter" data-level="23.2.2" data-path="packer-adv.html"><a href="packer-adv.html#packer-adv-shiny-vue-bs4"><i class="fa fa-check"></i><b>23.2.2</b> Bootstrap 4 Installation</a></li>
<li class="chapter" data-level="23.2.3" data-path="packer-adv.html"><a href="packer-adv.html#packer-adv-shiny-vue-code"><i class="fa fa-check"></i><b>23.2.3</b> Vue Code</a></li>
</ul></li>
</ul></li>
<li class="part"><span><b>VI Closing Remarks</b></span></li>
<li class="chapter" data-level="24" data-path="conclusion.html"><a href="conclusion.html"><i class="fa fa-check"></i><b>24</b> Conclusion</a><ul>
<li class="chapter" data-level="24.1" data-path="conclusion.html"><a href="conclusion.html#conclusion-performances"><i class="fa fa-check"></i><b>24.1</b> Performances</a></li>
<li class="chapter" data-level="24.2" data-path="conclusion.html"><a href="conclusion.html#conclusion-trial-and-error"><i class="fa fa-check"></i><b>24.2</b> Trial and Error</a></li>
<li class="chapter" data-level="24.3" data-path="conclusion.html"><a href="conclusion.html#conclusion-ux"><i class="fa fa-check"></i><b>24.3</b> Functionality and UX</a></li>
</ul></li>
<li class="chapter" data-level="" data-path="references.html"><a href="references.html"><i class="fa fa-check"></i>References</a></li>
</ul>

      </nav>
    </div>

    <div class="book-body">
      <div class="body-inner">
        <div class="book-header" role="navigation">
          <h1>
            <i class="fa fa-circle-o-notch fa-spin"></i><a href="./">JavaScript for R</a>
          </h1>
        </div>

        <div class="page-wrapper" tabindex="-1" role="main">
          <div class="page-inner">

            <section class="normal" id="section-">
<div id="widgets-full" class="section level1">
<h1><span class="header-section-number">Chapter 7</span> The Full Monty</h1>
<p>With a first widget built, one can jump onto another one: <a href="https://giojs.org/">gio.js</a>, a library to draw arcs between countries on a three-dimensional globe. This will include many more functionalities such packages can comprise.</p>
<p>Then again, the first order of business when looking to integrate a library is to look at the documentation to understand what should be reproduced in R. Figure <a href="widgets-full.html#fig:gio-example">7.1</a> is a very basic example of using Gio.js in HTML.</p>
<div class="sourceCode" id="cb110"><pre class="sourceCode html"><code class="sourceCode html"><a class="sourceLine" id="cb110-1" title="1"><span class="dt">&lt;!DOCTYPE </span>html<span class="dt">&gt;</span></a>
<a class="sourceLine" id="cb110-2" title="2"><span class="kw">&lt;html</span><span class="ot"> xmlns=</span><span class="st">&quot;http://www.w3.org/1999/xhtml&quot;</span><span class="ot"> lang=</span><span class="st">&quot;&quot;</span><span class="ot"> xml:lang=</span><span class="st">&quot;&quot;</span><span class="kw">&gt;</span></a>
<a class="sourceLine" id="cb110-3" title="3"></a>
<a class="sourceLine" id="cb110-4" title="4"><span class="kw">&lt;head&gt;</span></a>
<a class="sourceLine" id="cb110-5" title="5">  <span class="co">&lt;!-- Import libraries --&gt;</span></a>
<a class="sourceLine" id="cb110-6" title="6">  <span class="kw">&lt;script</span><span class="ot"> src=</span><span class="st">&quot;three.min.js&quot;</span><span class="kw">&gt;&lt;/script&gt;</span></a>
<a class="sourceLine" id="cb110-7" title="7">  <span class="kw">&lt;script</span><span class="ot"> src=</span><span class="st">&quot;gio.min.js&quot;</span><span class="kw">&gt;&lt;/script&gt;</span></a>
<a class="sourceLine" id="cb110-8" title="8"><span class="kw">&lt;/head&gt;</span></a>
<a class="sourceLine" id="cb110-9" title="9"></a>
<a class="sourceLine" id="cb110-10" title="10"><span class="kw">&lt;body&gt;</span></a>
<a class="sourceLine" id="cb110-11" title="11">  <span class="co">&lt;!-- div to hold visualisation --&gt;</span></a>
<a class="sourceLine" id="cb110-12" title="12">  <span class="kw">&lt;div</span><span class="ot"> id=</span><span class="st">&quot;globe&quot;</span><span class="ot"> style=</span><span class="st">&quot;width: 200px; height: 200px&quot;</span><span class="kw">&gt;&lt;/div&gt;</span></a>
<a class="sourceLine" id="cb110-13" title="13"></a>
<a class="sourceLine" id="cb110-14" title="14">  <span class="co">&lt;!-- Script to create visualisation --&gt;</span></a>
<a class="sourceLine" id="cb110-15" title="15">  <span class="kw">&lt;script&gt;</span></a>
<a class="sourceLine" id="cb110-16" title="16">    <span class="kw">var</span> container <span class="op">=</span> <span class="va">document</span>.<span class="at">getElementById</span>(<span class="st">&quot;globe&quot;</span>)<span class="op">;</span></a>
<a class="sourceLine" id="cb110-17" title="17">    <span class="kw">var</span> controller <span class="op">=</span> <span class="kw">new</span> <span class="va">GIO</span>.<span class="at">Controller</span>(container)<span class="op">;</span></a>
<a class="sourceLine" id="cb110-18" title="18">    <span class="va">controller</span>.<span class="at">addData</span>(data)<span class="op">;</span></a>
<a class="sourceLine" id="cb110-19" title="19">    <span class="va">controller</span>.<span class="at">init</span>()<span class="op">;</span></a>
<a class="sourceLine" id="cb110-20" title="20">  <span class="kw">&lt;/script&gt;</span></a>
<a class="sourceLine" id="cb110-21" title="21"><span class="kw">&lt;/body&gt;</span></a>
<a class="sourceLine" id="cb110-22" title="22"></a>
<a class="sourceLine" id="cb110-23" title="23"><span class="kw">&lt;/html&gt;</span></a></code></pre></div>
<div class="figure" style="text-align: center"><span id="fig:gio-example"></span>
<img src="images/gio-example.png" alt="Gio.js example" width="100%" />
<p class="caption">
FIGURE 7.1: Gio.js example
</p>
</div>
<p>Gio.js has itself a dependency, <a href="https://threejs.org/">three.js</a>, which needs to be imported before gio.js, other than that not much differs from libraries previously explored in this chapter.</p>
<div class="sourceCode" id="cb111"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb111-1" title="1">usethis<span class="op">::</span><span class="kw">create_package</span>(<span class="st">&quot;gio&quot;</span>)</a>
<a class="sourceLine" id="cb111-2" title="2">htmlwidgets<span class="op">::</span><span class="kw">scaffoldWidget</span>(<span class="st">&quot;gio&quot;</span>)</a></code></pre></div>
<div id="widgets-full-deps" class="section level2">
<h2><span class="header-section-number">7.1</span> Dependencies</h2>
<p>Handling the dependencies does not differ much, we create the directories within the <code>inst</code> path and download the dependencies within them.</p>
<div class="sourceCode" id="cb112"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb112-1" title="1"><span class="co"># create directories for JS dependencies</span></a>
<a class="sourceLine" id="cb112-2" title="2"><span class="kw">dir.create</span>(<span class="st">&quot;./inst/htmlwidgets/three&quot;</span>, <span class="dt">recursive =</span> <span class="ot">TRUE</span>)</a>
<a class="sourceLine" id="cb112-3" title="3"><span class="kw">dir.create</span>(<span class="st">&quot;./inst/htmlwidgets/gio&quot;</span>, <span class="dt">recursive =</span> <span class="ot">TRUE</span>)</a>
<a class="sourceLine" id="cb112-4" title="4"></a>
<a class="sourceLine" id="cb112-5" title="5"><span class="co"># download JS dependencies</span></a>
<a class="sourceLine" id="cb112-6" title="6">three &lt;-<span class="st"> </span><span class="kw">paste0</span>(</a>
<a class="sourceLine" id="cb112-7" title="7">  <span class="st">&quot;https://cdnjs.cloudflare.com/ajax/&quot;</span>,</a>
<a class="sourceLine" id="cb112-8" title="8">  <span class="st">&quot;libs/three.js/110/three.min.js&quot;</span></a>
<a class="sourceLine" id="cb112-9" title="9">)</a>
<a class="sourceLine" id="cb112-10" title="10">gio &lt;-<span class="st"> </span><span class="kw">paste0</span>(</a>
<a class="sourceLine" id="cb112-11" title="11">  <span class="st">&quot;https://raw.githubusercontent.com/&quot;</span>,</a>
<a class="sourceLine" id="cb112-12" title="12">  <span class="st">&quot;syt123450/giojs/master/build/gio.min.js&quot;</span></a>
<a class="sourceLine" id="cb112-13" title="13">)</a>
<a class="sourceLine" id="cb112-14" title="14"></a>
<a class="sourceLine" id="cb112-15" title="15"><span class="kw">download.file</span>(three, <span class="st">&quot;./inst/htmlwidgets/three/three.min.js&quot;</span>)</a>
<a class="sourceLine" id="cb112-16" title="16"><span class="kw">download.file</span>(gio, <span class="st">&quot;./inst/htmlwidgets/gio/gio.min.js&quot;</span>)</a></code></pre></div>
<p>This should produce the following working directory.</p>
<pre><code>.
├── DESCRIPTION
├── NAMESPACE
├── R
│   └── gio.R
└── inst
    └── htmlwidgets
        ├── gio
        │   └── gio.min.js
        ├── gio.js
        ├── gio.yaml
        └── three
            └── three.min.js</code></pre>
<p>The libraries have been downloaded, but the <code>gio.yml</code> file is yet to be edited. The order in which the libraries are listed matters. Just as in HTML, three.js needs to precede gio.js as the latter depends on the former and not vice versa.</p>
<div class="sourceCode" id="cb114"><pre class="sourceCode yml"><code class="sourceCode yaml"><a class="sourceLine" id="cb114-1" title="1"><span class="fu">dependencies:</span></a>
<a class="sourceLine" id="cb114-2" title="2">  <span class="kw">-</span> <span class="fu">name:</span><span class="at"> three</span></a>
<a class="sourceLine" id="cb114-3" title="3">    <span class="fu">version:</span><span class="at"> </span><span class="dv">110</span></a>
<a class="sourceLine" id="cb114-4" title="4">    <span class="fu">src:</span><span class="at"> htmlwidgets/three</span></a>
<a class="sourceLine" id="cb114-5" title="5">    <span class="fu">script:</span><span class="at"> three.min.js</span></a>
<a class="sourceLine" id="cb114-6" title="6">  <span class="kw">-</span> <span class="fu">name:</span><span class="at"> gio</span></a>
<a class="sourceLine" id="cb114-7" title="7">    <span class="fu">version:</span><span class="at"> </span><span class="fl">2.0</span></a>
<a class="sourceLine" id="cb114-8" title="8">    <span class="fu">src:</span><span class="at"> htmlwidgets/gio</span></a>
<a class="sourceLine" id="cb114-9" title="9">    <span class="fu">script:</span><span class="at"> gio.min.js</span></a></code></pre></div>
</div>
<div id="widgets-full-js" class="section level2">
<h2><span class="header-section-number">7.2</span> JavaScript</h2>
<p>Let’s copy the JavaScript code from the <a href="https://giojs.org/index.html">Get Started section of gio.js</a> in the <code>gio.js</code> file’s <code>renderValue</code> function. At this point, the data format is not known, so we comment the line, which adds data to the visualisation.</p>
<div class="sourceCode" id="cb115"><pre class="sourceCode js"><code class="sourceCode javascript"><a class="sourceLine" id="cb115-1" title="1"><span class="co">// gio.js</span></a>
<a class="sourceLine" id="cb115-2" title="2"><span class="va">HTMLWidgets</span>.<span class="at">widget</span>(<span class="op">{</span></a>
<a class="sourceLine" id="cb115-3" title="3"></a>
<a class="sourceLine" id="cb115-4" title="4">  <span class="dt">name</span><span class="op">:</span> <span class="st">&#39;gio&#39;</span><span class="op">,</span></a>
<a class="sourceLine" id="cb115-5" title="5"></a>
<a class="sourceLine" id="cb115-6" title="6">  <span class="dt">type</span><span class="op">:</span> <span class="st">&#39;output&#39;</span><span class="op">,</span></a>
<a class="sourceLine" id="cb115-7" title="7"></a>
<a class="sourceLine" id="cb115-8" title="8">  <span class="dt">factory</span><span class="op">:</span> <span class="kw">function</span>(el<span class="op">,</span> width<span class="op">,</span> height) <span class="op">{</span></a>
<a class="sourceLine" id="cb115-9" title="9"></a>
<a class="sourceLine" id="cb115-10" title="10">    <span class="co">// </span><span class="al">TODO</span><span class="co">: define shared variables for this instance</span></a>
<a class="sourceLine" id="cb115-11" title="11"></a>
<a class="sourceLine" id="cb115-12" title="12">    <span class="cf">return</span> <span class="op">{</span></a>
<a class="sourceLine" id="cb115-13" title="13"></a>
<a class="sourceLine" id="cb115-14" title="14">      <span class="dt">renderValue</span><span class="op">:</span> <span class="kw">function</span>(x) <span class="op">{</span></a>
<a class="sourceLine" id="cb115-15" title="15"></a>
<a class="sourceLine" id="cb115-16" title="16">        <span class="kw">var</span> container <span class="op">=</span> <span class="va">document</span>.<span class="at">getElementById</span>(<span class="st">&quot;globe&quot;</span>)<span class="op">;</span></a>
<a class="sourceLine" id="cb115-17" title="17">        <span class="kw">var</span> controller <span class="op">=</span> <span class="kw">new</span> <span class="va">GIO</span>.<span class="at">Controller</span>(container)<span class="op">;</span></a>
<a class="sourceLine" id="cb115-18" title="18">        <span class="co">//controller.addData(data);</span></a>
<a class="sourceLine" id="cb115-19" title="19">        <span class="va">controller</span>.<span class="at">init</span>()<span class="op">;</span></a>
<a class="sourceLine" id="cb115-20" title="20"></a>
<a class="sourceLine" id="cb115-21" title="21">      <span class="op">},</span></a>
<a class="sourceLine" id="cb115-22" title="22"></a>
<a class="sourceLine" id="cb115-23" title="23">      <span class="dt">resize</span><span class="op">:</span> <span class="kw">function</span>(width<span class="op">,</span> height) <span class="op">{</span></a>
<a class="sourceLine" id="cb115-24" title="24"></a>
<a class="sourceLine" id="cb115-25" title="25">        <span class="co">// </span><span class="al">TODO</span><span class="co">: code to re-render the widget with a new size</span></a>
<a class="sourceLine" id="cb115-26" title="26"></a>
<a class="sourceLine" id="cb115-27" title="27">      <span class="op">}</span></a>
<a class="sourceLine" id="cb115-28" title="28"></a>
<a class="sourceLine" id="cb115-29" title="29">    <span class="op">};</span></a>
<a class="sourceLine" id="cb115-30" title="30">  <span class="op">}</span></a>
<a class="sourceLine" id="cb115-31" title="31"><span class="op">}</span>)<span class="op">;</span></a></code></pre></div>
<p>One can document and load the package, but it will not work as the code above attempts to place the visualisation in a <code>div</code> with <code>id = "globe"</code>. As for the previously-written widget, this needs to be changed to <code>el.id</code>.</p>
<div class="sourceCode" id="cb116"><pre class="sourceCode js"><code class="sourceCode javascript"><a class="sourceLine" id="cb116-1" title="1"><span class="co">// gio.js</span></a>
<a class="sourceLine" id="cb116-2" title="2">renderValue<span class="op">:</span> <span class="kw">function</span>(x) <span class="op">{</span></a>
<a class="sourceLine" id="cb116-3" title="3"></a>
<a class="sourceLine" id="cb116-4" title="4">  <span class="kw">var</span> container <span class="op">=</span> <span class="va">document</span>.<span class="at">getElementById</span>(<span class="va">el</span>.<span class="at">id</span>)<span class="op">;</span></a>
<a class="sourceLine" id="cb116-5" title="5">  <span class="kw">var</span> controller <span class="op">=</span> <span class="kw">new</span> <span class="va">GIO</span>.<span class="at">Controller</span>(container)<span class="op">;</span></a>
<a class="sourceLine" id="cb116-6" title="6">  <span class="co">//controller.addData(data);</span></a>
<a class="sourceLine" id="cb116-7" title="7">  <span class="va">controller</span>.<span class="at">init</span>()<span class="op">;</span></a>
<a class="sourceLine" id="cb116-8" title="8"></a>
<a class="sourceLine" id="cb116-9" title="9"><span class="op">}</span></a></code></pre></div>
<p>At this stage, the widget should generate a visualisation (see Figure <a href="widgets-full.html#fig:gio-init">7.2</a>).</p>
<div class="sourceCode" id="cb117"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb117-1" title="1">devtools<span class="op">::</span><span class="kw">document</span>()</a>
<a class="sourceLine" id="cb117-2" title="2">devtools<span class="op">::</span><span class="kw">load_all</span>()</a>
<a class="sourceLine" id="cb117-3" title="3"><span class="kw">gio</span>(<span class="dt">message =</span> <span class="st">&quot;This required but not used&quot;</span>)</a></code></pre></div>
<div class="figure" style="text-align: center"><span id="fig:gio-init"></span>
<img src="images/gio-init.png" alt="Gio output without data" width="100%" />
<p class="caption">
FIGURE 7.2: Gio output without data
</p>
</div>
<p>Not too shabby given how little work was put into this! Before we move on, let us optimise something. In the JavaScript code, we retrieve the <code>container</code> using <code>el.id</code>, but this in effect is very inefficient: <code>el</code> is identical to <code>container</code>.</p>
<div class="sourceCode" id="cb118"><pre class="sourceCode js"><code class="sourceCode javascript"><a class="sourceLine" id="cb118-1" title="1"><span class="co">// gio.js</span></a>
<a class="sourceLine" id="cb118-2" title="2">renderValue<span class="op">:</span> <span class="kw">function</span>(x) <span class="op">{</span></a>
<a class="sourceLine" id="cb118-3" title="3"></a>
<a class="sourceLine" id="cb118-4" title="4">  <span class="kw">var</span> controller <span class="op">=</span> <span class="kw">new</span> <span class="va">GIO</span>.<span class="at">Controller</span>(el)<span class="op">;</span></a>
<a class="sourceLine" id="cb118-5" title="5">  <span class="co">//controller.addData(data);</span></a>
<a class="sourceLine" id="cb118-6" title="6">  <span class="va">controller</span>.<span class="at">init</span>()<span class="op">;</span></a>
<a class="sourceLine" id="cb118-7" title="7"></a>
<a class="sourceLine" id="cb118-8" title="8"><span class="op">}</span></a></code></pre></div>
</div>
<div id="widgets-full-data" class="section level2">
<h2><span class="header-section-number">7.3</span> Working with Data</h2>
<p>An exciting start, now onto adding data. Let us take a look at the <a href="https://giojs.org/html/docs/dataAdd.html">documentation</a> to see what data the library expects.</p>
<div class="sourceCode" id="cb119"><pre class="sourceCode json"><code class="sourceCode json"><a class="sourceLine" id="cb119-1" title="1"><span class="ot">[</span></a>
<a class="sourceLine" id="cb119-2" title="2">  <span class="fu">{</span></a>
<a class="sourceLine" id="cb119-3" title="3">    <span class="dt">&quot;e&quot;</span><span class="fu">:</span> <span class="st">&quot;CN&quot;</span><span class="fu">,</span></a>
<a class="sourceLine" id="cb119-4" title="4">    <span class="dt">&quot;i&quot;</span><span class="fu">:</span> <span class="st">&quot;US&quot;</span><span class="fu">,</span></a>
<a class="sourceLine" id="cb119-5" title="5">    <span class="dt">&quot;v&quot;</span><span class="fu">:</span> <span class="dv">3300000</span></a>
<a class="sourceLine" id="cb119-6" title="6">  <span class="fu">}</span><span class="ot">,</span></a>
<a class="sourceLine" id="cb119-7" title="7">  <span class="fu">{</span></a>
<a class="sourceLine" id="cb119-8" title="8">    <span class="dt">&quot;e&quot;</span><span class="fu">:</span> <span class="st">&quot;CN&quot;</span><span class="fu">,</span></a>
<a class="sourceLine" id="cb119-9" title="9">    <span class="dt">&quot;i&quot;</span><span class="fu">:</span> <span class="st">&quot;RU&quot;</span><span class="fu">,</span></a>
<a class="sourceLine" id="cb119-10" title="10">    <span class="dt">&quot;v&quot;</span><span class="fu">:</span> <span class="dv">10000</span></a>
<a class="sourceLine" id="cb119-11" title="11">  <span class="fu">}</span></a>
<a class="sourceLine" id="cb119-12" title="12"><span class="ot">]</span></a></code></pre></div>
<p>The JSON data should constitute arrays that denote arcs to draw on the globe where each arc is defined by an exporting country (<code>e</code>), an importing country (<code>i</code>), and is given a value (<code>v</code>). The importing and exporting country, the source and target of the arc, are indicated by ISO alpha-2 country codes. We can read this JSON into R.</p>
<div class="sourceCode" id="cb120"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb120-1" title="1"><span class="co"># data.frame to test</span></a>
<a class="sourceLine" id="cb120-2" title="2">arcs &lt;-<span class="st"> </span>jsonlite<span class="op">::</span><span class="kw">fromJSON</span>(</a>
<a class="sourceLine" id="cb120-3" title="3">  <span class="st">&#39;[</span></a>
<a class="sourceLine" id="cb120-4" title="4"><span class="st">    {</span></a>
<a class="sourceLine" id="cb120-5" title="5"><span class="st">      &quot;e&quot;: &quot;CN&quot;,</span></a>
<a class="sourceLine" id="cb120-6" title="6"><span class="st">      &quot;i&quot;: &quot;US&quot;,</span></a>
<a class="sourceLine" id="cb120-7" title="7"><span class="st">      &quot;v&quot;: 3300000</span></a>
<a class="sourceLine" id="cb120-8" title="8"><span class="st">    },</span></a>
<a class="sourceLine" id="cb120-9" title="9"><span class="st">    {</span></a>
<a class="sourceLine" id="cb120-10" title="10"><span class="st">      &quot;e&quot;: &quot;CN&quot;,</span></a>
<a class="sourceLine" id="cb120-11" title="11"><span class="st">      &quot;i&quot;: &quot;RU&quot;,</span></a>
<a class="sourceLine" id="cb120-12" title="12"><span class="st">      &quot;v&quot;: 10000</span></a>
<a class="sourceLine" id="cb120-13" title="13"><span class="st">    }</span></a>
<a class="sourceLine" id="cb120-14" title="14"><span class="st">  ]&#39;</span></a>
<a class="sourceLine" id="cb120-15" title="15">)</a>
<a class="sourceLine" id="cb120-16" title="16"></a>
<a class="sourceLine" id="cb120-17" title="17"><span class="kw">print</span>(arcs)</a>
<a class="sourceLine" id="cb120-18" title="18"><span class="co">#&gt;    e  i       v</span></a>
<a class="sourceLine" id="cb120-19" title="19"><span class="co">#&gt; 1 CN US 3300000</span></a>
<a class="sourceLine" id="cb120-20" title="20"><span class="co">#&gt; 2 CN RU   10000</span></a></code></pre></div>
<p>Jsonlite automagically converts the JSON into a data frame where each row is an arc, which is excellent as R users tend to prefer rectangular data over lists: this is probably what the package should use as input too. Let us make some changes to the <code>gio</code> function, so it takes data as input.</p>
<div class="sourceCode" id="cb121"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb121-1" title="1">gio &lt;-<span class="st"> </span><span class="cf">function</span>(data, <span class="dt">width =</span> <span class="ot">NULL</span>, <span class="dt">height =</span> <span class="ot">NULL</span>, <span class="dt">elementId =</span> <span class="ot">NULL</span>) {</a>
<a class="sourceLine" id="cb121-2" title="2"></a>
<a class="sourceLine" id="cb121-3" title="3">  <span class="co"># forward options using x</span></a>
<a class="sourceLine" id="cb121-4" title="4">  x =<span class="st"> </span><span class="kw">list</span>(</a>
<a class="sourceLine" id="cb121-5" title="5">    <span class="dt">data =</span> data</a>
<a class="sourceLine" id="cb121-6" title="6">  )</a>
<a class="sourceLine" id="cb121-7" title="7"></a>
<a class="sourceLine" id="cb121-8" title="8">  <span class="co"># create widget</span></a>
<a class="sourceLine" id="cb121-9" title="9">  htmlwidgets<span class="op">::</span><span class="kw">createWidget</span>(</a>
<a class="sourceLine" id="cb121-10" title="10">    <span class="dt">name =</span> <span class="st">&#39;gio&#39;</span>,</a>
<a class="sourceLine" id="cb121-11" title="11">    x,</a>
<a class="sourceLine" id="cb121-12" title="12">    <span class="dt">width =</span> width,</a>
<a class="sourceLine" id="cb121-13" title="13">    <span class="dt">height =</span> height,</a>
<a class="sourceLine" id="cb121-14" title="14">    <span class="dt">package =</span> <span class="st">&#39;gio&#39;</span>,</a>
<a class="sourceLine" id="cb121-15" title="15">    <span class="dt">elementId =</span> elementId</a>
<a class="sourceLine" id="cb121-16" title="16">  )</a>
<a class="sourceLine" id="cb121-17" title="17">}</a></code></pre></div>
<p>This must be reflected in the <code>play.js</code> file, where we uncomment the line previously commented and use <code>x.data</code> passed from R.</p>
<div class="sourceCode" id="cb122"><pre class="sourceCode js"><code class="sourceCode javascript"><a class="sourceLine" id="cb122-1" title="1"><span class="co">// gio.js</span></a>
<a class="sourceLine" id="cb122-2" title="2">renderValue<span class="op">:</span> <span class="kw">function</span>(x) <span class="op">{</span></a>
<a class="sourceLine" id="cb122-3" title="3"></a>
<a class="sourceLine" id="cb122-4" title="4">  <span class="kw">var</span> controller <span class="op">=</span> <span class="kw">new</span> <span class="va">GIO</span>.<span class="at">Controller</span>(el)<span class="op">;</span></a>
<a class="sourceLine" id="cb122-5" title="5">  <span class="va">controller</span>.<span class="at">addData</span>(<span class="va">x</span>.<span class="at">data</span>)<span class="op">;</span> <span class="co">// uncomment &amp; use x.data</span></a>
<a class="sourceLine" id="cb122-6" title="6">  <span class="va">controller</span>.<span class="at">init</span>()<span class="op">;</span></a>
<a class="sourceLine" id="cb122-7" title="7"></a>
<a class="sourceLine" id="cb122-8" title="8"><span class="op">}</span></a></code></pre></div>
<p>We can now use the function with the data to plot arcs!</p>
<div class="sourceCode" id="cb123"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb123-1" title="1">devtools<span class="op">::</span><span class="kw">document</span>()</a>
<a class="sourceLine" id="cb123-2" title="2">devtools<span class="op">::</span><span class="kw">load_all</span>()</a>
<a class="sourceLine" id="cb123-3" title="3"><span class="kw">gio</span>(arcs)</a></code></pre></div>
<p>Unfortunately, this breaks everything, and we are presented with a blank screen. Using <code>console.log</code> or looking at the source code the rendered widget reveals the problem: the data is not actually in the correct format!</p>
<div class="sourceCode" id="cb124"><pre class="sourceCode json"><code class="sourceCode json"><a class="sourceLine" id="cb124-1" title="1"><span class="fu">{</span></a>
<a class="sourceLine" id="cb124-2" title="2">  <span class="dt">&quot;x&quot;</span><span class="fu">:{</span></a>
<a class="sourceLine" id="cb124-3" title="3">    <span class="dt">&quot;data&quot;</span><span class="fu">:{</span></a>
<a class="sourceLine" id="cb124-4" title="4">      <span class="dt">&quot;e&quot;</span><span class="fu">:</span><span class="ot">[</span><span class="st">&quot;CN&quot;</span><span class="ot">,</span><span class="st">&quot;CN&quot;</span><span class="ot">]</span><span class="fu">,</span></a>
<a class="sourceLine" id="cb124-5" title="5">      <span class="dt">&quot;i&quot;</span><span class="fu">:</span><span class="ot">[</span><span class="st">&quot;US&quot;</span><span class="ot">,</span><span class="st">&quot;RU&quot;</span><span class="ot">]</span><span class="fu">,</span></a>
<a class="sourceLine" id="cb124-6" title="6">      <span class="dt">&quot;v&quot;</span><span class="fu">:</span><span class="ot">[</span><span class="dv">3300000</span><span class="ot">,</span><span class="dv">10000</span><span class="ot">]</span></a>
<a class="sourceLine" id="cb124-7" title="7">    <span class="fu">}</span></a>
<a class="sourceLine" id="cb124-8" title="8">  <span class="fu">},</span></a>
<a class="sourceLine" id="cb124-9" title="9">  <span class="dt">&quot;evals&quot;</span><span class="fu">:</span><span class="ot">[]</span><span class="fu">,</span></a>
<a class="sourceLine" id="cb124-10" title="10">  <span class="dt">&quot;jsHooks&quot;</span><span class="fu">:</span><span class="ot">[]</span></a>
<a class="sourceLine" id="cb124-11" title="11"><span class="fu">}</span></a></code></pre></div>
<p>Htmlwidgets serialised the data frame column-wise (long), where each array is a column, whereas gio.js expect the data to be wide (row-wise serialisation), where each array is an arc (row).</p>
<div class="sourceCode" id="cb125"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb125-1" title="1"><span class="co"># column-wise</span></a>
<a class="sourceLine" id="cb125-2" title="2">jsonlite<span class="op">::</span><span class="kw">toJSON</span>(arcs, <span class="dt">dataframe =</span> <span class="st">&quot;columns&quot;</span>)</a>
<a class="sourceLine" id="cb125-3" title="3"><span class="co">#&gt; {&quot;e&quot;:[&quot;CN&quot;,&quot;CN&quot;],&quot;i&quot;:[&quot;US&quot;,&quot;RU&quot;],&quot;v&quot;:[3300000,10000]}</span></a>
<a class="sourceLine" id="cb125-4" title="4"><span class="co"># row-wise</span></a>
<a class="sourceLine" id="cb125-5" title="5">jsonlite<span class="op">::</span><span class="kw">toJSON</span>(arcs, <span class="dt">dataframe =</span> <span class="st">&quot;rows&quot;</span>)</a>
<a class="sourceLine" id="cb125-6" title="6"><span class="co">#&gt; [{&quot;e&quot;:&quot;CN&quot;,&quot;i&quot;:&quot;US&quot;,&quot;v&quot;:3300000},{&quot;e&quot;:&quot;CN&quot;,&quot;i&quot;:&quot;RU&quot;,&quot;v&quot;:10000}]</span></a></code></pre></div>
<p>As mentioned previously, the convention has it that rectangular data (data frames) are serialised row-wise. That is likely to be a recurring problem for many widgets.</p>
</div>
<div id="widgets-full-transform-data" class="section level2">
<h2><span class="header-section-number">7.4</span> Transforming Data</h2>
<p>There are multiple ways to transform the data and ensure the serialised JSON is as the JavaScript library expects it to be. The following sections explore those various methods before settling on a specific one for the gio package.</p>
<div id="widgets-full-transform-data-js" class="section level3">
<h3><span class="header-section-number">7.4.1</span> Using JavaScript</h3>
<p>JavaScript can be used to transform the data, thereby leaving the serialiser as-is only to reshape it into the client. The htmlwidget JavaScript library (already imported by default) exports an object, which provides a method, <code>dataframeToD3</code>, to transform the data from long to wide.</p>
<div class="sourceCode" id="cb126"><pre class="sourceCode js"><code class="sourceCode javascript"><a class="sourceLine" id="cb126-1" title="1"><span class="co">// gio.js</span></a>
<a class="sourceLine" id="cb126-2" title="2">renderValue<span class="op">:</span> <span class="kw">function</span>(x) <span class="op">{</span></a>
<a class="sourceLine" id="cb126-3" title="3"></a>
<a class="sourceLine" id="cb126-4" title="4">  <span class="co">// long to wide</span></a>
<a class="sourceLine" id="cb126-5" title="5">  <span class="va">x</span>.<span class="at">data</span> <span class="op">=</span> <span class="va">HTMLWidgets</span>.<span class="at">dataframeToD3</span>(<span class="va">x</span>.<span class="at">data</span>)<span class="op">;</span></a>
<a class="sourceLine" id="cb126-6" title="6"></a>
<a class="sourceLine" id="cb126-7" title="7">  <span class="kw">var</span> controller <span class="op">=</span> <span class="kw">new</span> <span class="va">GIO</span>.<span class="at">Controller</span>(el)<span class="op">;</span></a>
<a class="sourceLine" id="cb126-8" title="8">  <span class="va">controller</span>.<span class="at">addData</span>(<span class="va">x</span>.<span class="at">data</span>)<span class="op">;</span> </a>
<a class="sourceLine" id="cb126-9" title="9">  <span class="va">controller</span>.<span class="at">init</span>()<span class="op">;</span></a>
<a class="sourceLine" id="cb126-10" title="10"></a>
<a class="sourceLine" id="cb126-11" title="11"><span class="op">}</span></a></code></pre></div>
</div>
<div id="widgets-full-transform-data-modify" class="section level3">
<h3><span class="header-section-number">7.4.2</span> Modify Serialiser</h3>
<p>Instead of serialising the data a certain way then correct it in JavaScript as demonstrated previously, one can also modify, or even replace the htmlwidgets default serialiser. Speaking of which, below is the default serializer used by htmlwidgets.</p>
<div class="sourceCode" id="cb127"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb127-1" title="1"><span class="cf">function</span> (x, ..., <span class="dt">dataframe =</span> <span class="st">&quot;columns&quot;</span>, <span class="dt">null =</span> <span class="st">&quot;null&quot;</span>, </a>
<a class="sourceLine" id="cb127-2" title="2"><span class="dt">na =</span> <span class="st">&quot;null&quot;</span>, <span class="dt">auto_unbox =</span> <span class="ot">TRUE</span>, <span class="dt">use_signif =</span> <span class="ot">TRUE</span>, </a>
<a class="sourceLine" id="cb127-3" title="3">  <span class="dt">digits =</span> <span class="kw">getOption</span>(<span class="st">&quot;shiny.json.digits&quot;</span>, <span class="dv">16</span>), <span class="dt">force =</span> <span class="ot">TRUE</span>,</a>
<a class="sourceLine" id="cb127-4" title="4">  <span class="dt">POSIXt =</span> <span class="st">&quot;ISO8601&quot;</span>, <span class="dt">UTC =</span> <span class="ot">TRUE</span>, <span class="dt">rownames =</span> <span class="ot">FALSE</span>, </a>
<a class="sourceLine" id="cb127-5" title="5">  <span class="dt">keep_vec_names =</span> <span class="ot">TRUE</span>, <span class="dt">strict_atomic =</span> <span class="ot">TRUE</span>) </a>
<a class="sourceLine" id="cb127-6" title="6">{</a>
<a class="sourceLine" id="cb127-7" title="7">  <span class="cf">if</span> (strict_atomic) </a>
<a class="sourceLine" id="cb127-8" title="8">      x &lt;-<span class="st"> </span><span class="kw">I</span>(x)</a>
<a class="sourceLine" id="cb127-9" title="9">  jsonlite<span class="op">::</span><span class="kw">toJSON</span>(x, <span class="dt">dataframe =</span> dataframe, <span class="dt">null =</span> null, <span class="dt">na =</span> na, </a>
<a class="sourceLine" id="cb127-10" title="10">    <span class="dt">auto_unbox =</span> auto_unbox, <span class="dt">digits =</span> digits, <span class="dt">force =</span> force, </a>
<a class="sourceLine" id="cb127-11" title="11">    <span class="dt">use_signif =</span> use_signif, <span class="dt">POSIXt =</span> POSIXt, <span class="dt">UTC =</span> UTC, </a>
<a class="sourceLine" id="cb127-12" title="12">    <span class="dt">rownames =</span> rownames, <span class="dt">keep_vec_names =</span> keep_vec_names, </a>
<a class="sourceLine" id="cb127-13" title="13">    <span class="dt">json_verbatim =</span> <span class="ot">TRUE</span>, ...)</a>
<a class="sourceLine" id="cb127-14" title="14">}</a></code></pre></div>
<p>The problem at hand is caused by the <code>data.frame</code> argument, which is set to <code>columns</code> where it should be set <code>rows</code> (for row-wise). Arguments are passed to the serialiser indirectly, in the form of a list set as <code>TOJSON_ARGS</code> attribute to the object <code>x</code> that is serialised. We could thus change the <code>gio</code> function to reflect the aforementioned change.</p>
<div class="sourceCode" id="cb128"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb128-1" title="1">gio &lt;-<span class="st"> </span><span class="cf">function</span>(data, <span class="dt">width =</span> <span class="ot">NULL</span>, <span class="dt">height =</span> <span class="ot">NULL</span>, </a>
<a class="sourceLine" id="cb128-2" title="2">  <span class="dt">elementId =</span> <span class="ot">NULL</span>) {</a>
<a class="sourceLine" id="cb128-3" title="3"></a>
<a class="sourceLine" id="cb128-4" title="4">  <span class="co"># forward options using x</span></a>
<a class="sourceLine" id="cb128-5" title="5">  x =<span class="st"> </span><span class="kw">list</span>(</a>
<a class="sourceLine" id="cb128-6" title="6">    <span class="dt">data =</span> data</a>
<a class="sourceLine" id="cb128-7" title="7">  )</a>
<a class="sourceLine" id="cb128-8" title="8"></a>
<a class="sourceLine" id="cb128-9" title="9">  <span class="co"># serialise data.frames to wide (not long as default)</span></a>
<a class="sourceLine" id="cb128-10" title="10">  <span class="kw">attr</span>(x, <span class="st">&#39;TOJSON_ARGS&#39;</span>) &lt;-<span class="st"> </span><span class="kw">list</span>(<span class="dt">dataframe =</span> <span class="st">&quot;rows&quot;</span>)</a>
<a class="sourceLine" id="cb128-11" title="11"></a>
<a class="sourceLine" id="cb128-12" title="12">  <span class="co"># create widget</span></a>
<a class="sourceLine" id="cb128-13" title="13">  htmlwidgets<span class="op">::</span><span class="kw">createWidget</span>(</a>
<a class="sourceLine" id="cb128-14" title="14">    <span class="dt">name =</span> <span class="st">&#39;gio&#39;</span>,</a>
<a class="sourceLine" id="cb128-15" title="15">    x,</a>
<a class="sourceLine" id="cb128-16" title="16">    <span class="dt">width =</span> width,</a>
<a class="sourceLine" id="cb128-17" title="17">    <span class="dt">height =</span> height,</a>
<a class="sourceLine" id="cb128-18" title="18">    <span class="dt">package =</span> <span class="st">&#39;gio&#39;</span>,</a>
<a class="sourceLine" id="cb128-19" title="19">    <span class="dt">elementId =</span> elementId</a>
<a class="sourceLine" id="cb128-20" title="20">  )</a>
<a class="sourceLine" id="cb128-21" title="21">}</a></code></pre></div>
<p>The above may appear confusing at first as one rarely encounters the <code>attr</code> replacement function.</p>
<div class="sourceCode" id="cb129"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb129-1" title="1"><span class="kw">attr</span>(cars, <span class="st">&quot;hello&quot;</span>) &lt;-<span class="st"> &quot;world&quot;</span> <span class="co"># set </span></a>
<a class="sourceLine" id="cb129-2" title="2"><span class="kw">attr</span>(cars, <span class="st">&quot;hello&quot;</span>) <span class="co"># get </span></a>
<a class="sourceLine" id="cb129-3" title="3"><span class="co">#&gt; [1] &quot;world&quot;</span></a></code></pre></div>
<p>Other arguments can be placed in the same list; they will ultimately reach the serialiser to modify its output.</p>
</div>
<div id="widgets-full-transform-data-replace" class="section level3">
<h3><span class="header-section-number">7.4.3</span> Replace Serialiser</h3>
<p>Otherwise, the serialiser can also be replaced in its entirety, also by setting an attribute, <code>TOJSON_FUNC</code>, to the <code>x</code> object. Below the serialiser is changed to jsonify <span class="citation">(Cooley <a href="#ref-R-jsonify">2020</a>)</span>, which by default serialises data frames to wide, unlike htmlwidgets’ serialiser, thereby also fixing the issue.</p>
<div class="sourceCode" id="cb130"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb130-1" title="1">gio &lt;-<span class="st"> </span><span class="cf">function</span>(data, <span class="dt">width =</span> <span class="ot">NULL</span>, <span class="dt">height =</span> <span class="ot">NULL</span>, </a>
<a class="sourceLine" id="cb130-2" title="2">  <span class="dt">elementId =</span> <span class="ot">NULL</span>) {</a>
<a class="sourceLine" id="cb130-3" title="3"></a>
<a class="sourceLine" id="cb130-4" title="4">  <span class="co"># forward options using x</span></a>
<a class="sourceLine" id="cb130-5" title="5">  x =<span class="st"> </span><span class="kw">list</span>(</a>
<a class="sourceLine" id="cb130-6" title="6">    <span class="dt">data =</span> data</a>
<a class="sourceLine" id="cb130-7" title="7">  )</a>
<a class="sourceLine" id="cb130-8" title="8"></a>
<a class="sourceLine" id="cb130-9" title="9">  <span class="co"># replace serialiser</span></a>
<a class="sourceLine" id="cb130-10" title="10">  <span class="kw">attr</span>(x, <span class="st">&#39;TOJSON_FUNC&#39;</span>) &lt;-<span class="st"> </span>gio_serialiser</a>
<a class="sourceLine" id="cb130-11" title="11"></a>
<a class="sourceLine" id="cb130-12" title="12">  <span class="co"># create widget</span></a>
<a class="sourceLine" id="cb130-13" title="13">  htmlwidgets<span class="op">::</span><span class="kw">createWidget</span>(</a>
<a class="sourceLine" id="cb130-14" title="14">    <span class="dt">name =</span> <span class="st">&#39;gio&#39;</span>,</a>
<a class="sourceLine" id="cb130-15" title="15">    x,</a>
<a class="sourceLine" id="cb130-16" title="16">    <span class="dt">width =</span> width,</a>
<a class="sourceLine" id="cb130-17" title="17">    <span class="dt">height =</span> height,</a>
<a class="sourceLine" id="cb130-18" title="18">    <span class="dt">package =</span> <span class="st">&#39;gio&#39;</span>,</a>
<a class="sourceLine" id="cb130-19" title="19">    <span class="dt">elementId =</span> elementId</a>
<a class="sourceLine" id="cb130-20" title="20">  )</a>
<a class="sourceLine" id="cb130-21" title="21">}</a>
<a class="sourceLine" id="cb130-22" title="22"></a>
<a class="sourceLine" id="cb130-23" title="23"><span class="co"># serialiser</span></a>
<a class="sourceLine" id="cb130-24" title="24">gio_serialiser &lt;-<span class="st"> </span><span class="cf">function</span>(x){</a>
<a class="sourceLine" id="cb130-25" title="25">  jsonify<span class="op">::</span><span class="kw">to_json</span>(x, <span class="dt">unbox =</span> <span class="ot">TRUE</span>)</a>
<a class="sourceLine" id="cb130-26" title="26">}</a></code></pre></div>
</div>
<div id="widgets-full-transform-data-modify-data" class="section level3">
<h3><span class="header-section-number">7.4.4</span> Modify the Data</h3>
<p>Alternatively, one can also leave all serialisers-related options unchanged and instead format the data in R prior to the serialisation, changing the dataframe to a row-wise list.</p>
<div class="sourceCode" id="cb131"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb131-1" title="1">x =<span class="st"> </span><span class="kw">list</span>(</a>
<a class="sourceLine" id="cb131-2" title="2">  <span class="dt">data =</span> <span class="kw">apply</span>(data, <span class="dv">1</span>, as.list)</a>
<a class="sourceLine" id="cb131-3" title="3">)</a></code></pre></div>
<p>The above would make it such that the serialiser no longer has to interpret how the data should be serialised (row-wise or column-wise), the data now being a list will be serialised correctly.</p>
</div>
<div id="widgets-full-transform-data-conclusion" class="section level3">
<h3><span class="header-section-number">7.4.5</span> Pros and Cons</h3>
<p>There are pros and cons to each method. The preferable method is probably to alter the default serialiser <strong>only where needed</strong>; this is the method used in the remainder of the book. Replacing the serialiser in its entirety should not be necessary, only do this once you are very familiar with serialisation and truly see a need for it. Moreover, htmlwidgets’ serialiser extends jsonlite to allow converting JavaScript code, which will come in handy later on. Transforming the data in JavaScript has one drawback, <code>HTMLWidgets.dataframeToD3</code> cannot be applied to the entire <code>x</code> object, it will only work on the subsets that hold the column-wise data (<code>x.data</code>), which tends to lead to clunky code as one uses said function in various places.</p>
<div class="figure" style="text-align: center"><span id="fig:gio-data"></span>
<img src="images/gio-data.png" alt="Gio output with correct serialisation" width="100%" />
<p class="caption">
FIGURE 7.3: Gio output with correct serialisation
</p>
</div>
<p>Figure <a href="widgets-full.html#fig:gio-data">7.3</a> shows that the arcs correctly appear on the globe once the default serialiser has been modified.</p>
</div>
</div>
<div id="widgets-full-on-print" class="section level2">
<h2><span class="header-section-number">7.5</span> On Print Method</h2>
<p>Let us add the option to style the globe: gio.js provides multiple <a href="https://giojs.org/html/docs/colorStyle.html">themes</a> but they are currently not applicable from R. As a matter of fact, gio.js provides dozens of customisation options that should be available in the package as well. These, however, probably should be split across different functions, just like they are in gio.js, rather than all be accessible from a single function containing hundreds of arguments. This begs the question, when would one use another function given the function <code>gio</code> generates the visualisation? As it happens <code>gio</code> itself (or rather the function <code>htmlwidgets::createWidget</code> it contains) does not render the output; it returns an object of class “htmlwidget,” which renders the visualisation on print (literally <code>htmlwidget.print</code> method).</p>
<div class="sourceCode" id="cb132"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb132-1" title="1">g &lt;-<span class="st"> </span><span class="kw">gio</span>(arcs) <span class="co"># nothing renders</span></a>
<a class="sourceLine" id="cb132-2" title="2">g <span class="co"># visualisation renders</span></a></code></pre></div>
<p>Therefore, one can use functions on the object returned by <code>gio</code>, which contains, amongst other things, the <code>x</code> list to which we can make changes, append data, or do any other operation that standard R lists allow.</p>
<div class="sourceCode" id="cb133"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb133-1" title="1"><span class="kw">print</span>(g<span class="op">$</span>x)</a>
<a class="sourceLine" id="cb133-2" title="2"></a>
<a class="sourceLine" id="cb133-3" title="3"><span class="co">## $data</span></a>
<a class="sourceLine" id="cb133-4" title="4"><span class="co">##    e  i       v</span></a>
<a class="sourceLine" id="cb133-5" title="5"><span class="co">## 1 CN US 3300000</span></a>
<a class="sourceLine" id="cb133-6" title="6"><span class="co">## 2 CN RU   10000</span></a>
<a class="sourceLine" id="cb133-7" title="7"><span class="co">## </span></a>
<a class="sourceLine" id="cb133-8" title="8"><span class="co">## attr(,&quot;TOJSON_ARGS&quot;)</span></a>
<a class="sourceLine" id="cb133-9" title="9"><span class="co">## attr(,&quot;TOJSON_ARGS&quot;)$dataframe</span></a>
<a class="sourceLine" id="cb133-10" title="10"><span class="co">## [1] &quot;rows&quot;</span></a></code></pre></div>
<p>This clarified, the function to change the style of the visualisation can be added to the package. It would take as input the output of <code>gio</code> and append the style (name of theme) to the <code>x</code> list; this would then be used in JavaScript to change the look of the visualisation.</p>
<div class="sourceCode" id="cb134"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb134-1" title="1"><span class="co">#&#39; @export</span></a>
<a class="sourceLine" id="cb134-2" title="2">gio_style &lt;-<span class="st"> </span><span class="cf">function</span>(g, <span class="dt">style =</span> <span class="st">&quot;magic&quot;</span>){</a>
<a class="sourceLine" id="cb134-3" title="3">  g<span class="op">$</span>x<span class="op">$</span>style &lt;-<span class="st"> </span>style</a>
<a class="sourceLine" id="cb134-4" title="4">  <span class="kw">return</span>(g)</a>
<a class="sourceLine" id="cb134-5" title="5">}</a></code></pre></div>
<p>The style is applied using the <code>setStyle</code> method on the controller before the visualisation is created, before the <code>init</code> method is called, using the style passed from R: <code>x.style</code>.</p>
<div class="sourceCode" id="cb135"><pre class="sourceCode js"><code class="sourceCode javascript"><a class="sourceLine" id="cb135-1" title="1"><span class="co">// gio.js</span></a>
<a class="sourceLine" id="cb135-2" title="2">renderValue<span class="op">:</span> <span class="kw">function</span>(x) <span class="op">{</span></a>
<a class="sourceLine" id="cb135-3" title="3"></a>
<a class="sourceLine" id="cb135-4" title="4">  <span class="kw">var</span> controller <span class="op">=</span> <span class="kw">new</span> <span class="va">GIO</span>.<span class="at">Controller</span>(el)<span class="op">;</span></a>
<a class="sourceLine" id="cb135-5" title="5">  <span class="va">controller</span>.<span class="at">addData</span>(<span class="va">x</span>.<span class="at">data</span>)<span class="op">;</span> </a>
<a class="sourceLine" id="cb135-6" title="6"></a>
<a class="sourceLine" id="cb135-7" title="7">  <span class="va">controller</span>.<span class="at">setStyle</span>(<span class="va">x</span>.<span class="at">style</span>)<span class="op">;</span> <span class="co">// set style</span></a>
<a class="sourceLine" id="cb135-8" title="8"></a>
<a class="sourceLine" id="cb135-9" title="9">  <span class="va">controller</span>.<span class="at">init</span>()<span class="op">;</span></a>
<a class="sourceLine" id="cb135-10" title="10"></a>
<a class="sourceLine" id="cb135-11" title="11"><span class="op">}</span></a></code></pre></div>
<p>We can now run <code>devtools::load_all</code> to export the newly written function and load the functions in the environment with <code>devtools::load_all</code> as shown in Figure <a href="widgets-full.html#fig:gio-style">7.4</a>.</p>
<div class="sourceCode" id="cb136"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb136-1" title="1">g1 &lt;-<span class="st"> </span><span class="kw">gio</span>(arcs)</a>
<a class="sourceLine" id="cb136-2" title="2">g2 &lt;-<span class="st"> </span><span class="kw">gio_style</span>(g1, <span class="st">&quot;juicyCake&quot;</span>)</a>
<a class="sourceLine" id="cb136-3" title="3"></a>
<a class="sourceLine" id="cb136-4" title="4">g2</a></code></pre></div>
<div class="figure" style="text-align: center"><span id="fig:gio-style"></span>
<img src="images/gio-style.png" alt="Gio with a new theme" width="100%" />
<p class="caption">
FIGURE 7.4: Gio with a new theme
</p>
</div>
<p>This is great but can be greatly improved upon with the magrittr pipe <span class="citation">(Bache and Wickham <a href="#ref-R-magrittr">2020</a>)</span>, it would allow effortlessly passing the output of each function to the next to obtain an API akin to that of plotly or highcharter.</p>
<div class="sourceCode" id="cb137"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb137-1" title="1"><span class="kw">library</span>(magrittr)</a>
<a class="sourceLine" id="cb137-2" title="2"></a>
<a class="sourceLine" id="cb137-3" title="3"><span class="kw">gio</span>(arcs) <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb137-4" title="4"><span class="st">  </span><span class="kw">gio_style</span>(<span class="st">&quot;juicyCake&quot;</span>)</a></code></pre></div>
<p>The pipe drastically improves the API that gio provides its users and thus probably should be exported by the package; the usethis package provides a function to do so easily.</p>
<div class="sourceCode" id="cb138"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb138-1" title="1"><span class="co"># export the pipe</span></a>
<a class="sourceLine" id="cb138-2" title="2">usethis<span class="op">::</span><span class="kw">use_pipe</span>()</a></code></pre></div>
<p>This closes this chapter but is not the last we see of gio.js; we shall use it as an example in the next chapters as we extend its functionalities and polish certain aspects such as sizing and security.</p>

</div>
</div>
<h3>References</h3>
<div id="refs" class="references">
<div id="ref-R-magrittr">
<p>Bache, Stefan Milton, and Hadley Wickham. 2020. <em>Magrittr: A Forward-Pipe Operator for R</em>. <a href="https://CRAN.R-project.org/package=magrittr">https://CRAN.R-project.org/package=magrittr</a>.</p>
</div>
<div id="ref-R-jsonify">
<p>Cooley, David. 2020. <em>Jsonify: Convert Between ’R’ Objects and Javascript Object Notation (Json)</em>. <a href="https://CRAN.R-project.org/package=jsonify">https://CRAN.R-project.org/package=jsonify</a>.</p>
</div>
</div>
            </section>

          </div>
        </div>
      </div>
<a href="widgets-realistic.html" class="navigation navigation-prev " aria-label="Previous page"><i class="fa fa-angle-left"></i></a>
<a href="widgets-adv.html" class="navigation navigation-next " aria-label="Next page"><i class="fa fa-angle-right"></i></a>
    </div>
  </div>
<script src="libs/gitbook-2.6.7/js/app.min.js"></script>
<script src="libs/gitbook-2.6.7/js/lunr.js"></script>
<script src="libs/gitbook-2.6.7/js/clipboard.min.js"></script>
<script src="libs/gitbook-2.6.7/js/plugin-search.js"></script>
<script src="libs/gitbook-2.6.7/js/plugin-sharing.js"></script>
<script src="libs/gitbook-2.6.7/js/plugin-fontsettings.js"></script>
<script src="libs/gitbook-2.6.7/js/plugin-bookdown.js"></script>
<script src="libs/gitbook-2.6.7/js/jquery.highlight.js"></script>
<script src="libs/gitbook-2.6.7/js/plugin-clipboard.js"></script>
<script>
gitbook.require(["gitbook"], function(gitbook) {
gitbook.start({
"sharing": {
"github": true,
"facebook": false,
"twitter": false,
"linkedin": false,
"weibo": false,
"instapaper": false,
"vk": false,
"all": {}
},
"fontsettings": {
"theme": "white",
"family": "sans",
"size": 2
},
"edit": {
"link": "https://github.com/JohnCoene/javascript-for-r/edit/master/3-24-htmlwidgets-gio.Rmd",
"text": "Edit"
},
"history": {
"link": null,
"text": null
},
"view": {
"link": null,
"text": null
},
"download": {},
"toc": {
"collapse": "section"
}
});
});
</script>

</body>

</html>
